Level 67
Feb 10, 2022
14
Level 3
Add Bootstrap to Laravel Inertia Project
Hi guys,
I'm building up my project 'preset', I will be using Laravel + Inertia + Vue. For CSS Framework I would like to go for Bootstrap 5, but, I'm not aware on what would be the 'cleanest' way to add Bootstrap 5 to a Laravel/Inertia/Vue project, I would be glad if anybody can guide me on this. I'm not sure I should go for 'bootstrap-vue'. Also, I want to use a component library called DevExtreme, from DevExpress. (https://js.devexpress.com/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/) For this specific project 'preset' would it be as straight forward as in the DevExtreme documentation to bundle it on? Be sides this, is there anything I should be aware of?
Thanks in advance, João.
Level 3
@fylzero Thanks mate 😁
2 likes
Level 1
@fylzero I don't really think this answered the question.... Please anyone with a better guide on using bootstrap with inertia?
1 like
Level 102
@SunnyTechie this is set as solved so perhaps try making a new thread where we can help you.
1 like
Level 67
@SunnyTechie It does actually answer the question. If you want to add Bootstrap to an Inertia project, it is incredibly simple to scaffold an Inertia Laravel project and pull Bootstrap CDN into your template or use Node to implement that. The implication of this question, at the time it was asked, was concerned with using Jetstream, which only has auth templates built out in Tailwind. Thus, you need a package (such as the one provided) OR you'd need to write new auth, etc. templates and implement them yourself based on Tailwind.
I would sooner spend the time talking you out of using Bootstrap for new projects than I would do this work (which has already been done in the provided package/video). I would advise you to consider learning Tailwind as it is objectively better for building component-based single-page apps - especially with Jetstream (since that is what it is built on). Combining Bootstrap with Jetstream is imo begging for technical debt as you will need to account for all future changes to Jetstream.
2 likes
Level 1
@fylzero Alright, thanks for taking the time to reply.
However, some of us are so comfortable with Bootstrap and the last time I tried working with Tailwind it seem like a lot to me because I just needed to build my software as quickly as possible.
Before Vite was added to Laravel we could decide whether to use Bootstrap or Tailwind... Well, It seems Tailwind isn't going so well with me.
I wish to see a tutorial on how to use Bootstrap with the new Vite.
Level 67
@sunnytechie I don't see anyone making that tutorial and probably for good reason. It isn't the current state of things and would cause more problems and confusion. You're already learning Inertia (which is a new way of doing things)... why not learn Tailwind as well? Tailwind, aside from not providing components out of the box (which Headless UI and Tailwind UI do), Tailwind classes are 95% identical (if not more simplified) than Bootstrap is for rapid building. If you are familiar with Bootstrap - you already know the majority of Tailwind and it only takes just an hour or two to skim through the documentation. Plus, once you actually start building components - Tailwind is MUCH easier to follow and maintain.
Bootstrap was built to assist in pre-SPA, pre-custom-component, land. It was always intended to be a component library with some utility classes that unfortunately makes building custom front ends messy and difficult. Tailwind solves all of these issues - which is why the Laravel community has gravitated towards it albeit via somewhat forced-adoption.
Given the option to spend effort learning ways to force all the new things to bridge with an outdated front-end framework, wouldn't that effort be better spent learning the new way/tools? Tailwind is easy to learn - and Vite, you really don't need to know much about as it is pre-configured in new Laravel projects to work with Tailwind - as is Inertia.
3 likes
Level 1
@fylzero I think I needed to know all you wrote here. Sometimes it is hard to accept change but when we do, we realize it the best. Will adopt Tailwind from now on.
Thanks.
3 likes
Level 67
@SunnyTechie I definitely had my knee-jerk reaction to Tailwind myself at first. Now that I've been using it - I literally hate working with Bootstrap. lol Glad this was helpful/informative!
1 like
Level 1
@fylzero Thanks so much for this piece. I am also stuck with bootstrap. But I'm now heading to tailwind
1 like
Level 1
@fylzero most of the documentation is paywalled
Level 67
@rushughes Not true at all. Tailwind UI, not Tailwind itself, is paywalled because it provides built-out components. Those components can be built by anyone using Tailwind's free documentation and there are other free Tailwind component libraries and à la carte components out there (such as Headless UI). That said, you get what you pay for. ...and there are benefits to building components yourself. I've largely followed this approach and it spares me vendor lock-in, upgrade headaches, and unexpected paywalls as libraries mature.
Level 10
I just don't like Tailwind, I want a easy way to scaffold the app with bootstrap, jetstrap is a independent packages so with the last changes on Laravel 9, it's almost imposible to switch easy. no documentation or explanetion about downgrade to laravel mix manually. how can I trust my proyects to this kind of packages?
I know a lot of people love tailwind. but right now it is too tied to tailwind, I would like to think that it is not for commercial reasons.
Level 37
Tailwind is an easy way. You can also write the classes yourself. Usually you can also replace used views & other resources with your own.
But a downgread on Webpack I don't understand. I don't know what function is missing in Vite.
Please or to participate in this conversation.