@isanjayjoshi Yes, it’s possible. I’m not sure why you don’t think it would be? Bootstrap is just a CSS and JavaScript library. I’ve made many admin panels (and websites and web applications) using Bootstrap.
-
Install Bootstrap via npm:
npm install bootstrap --save-dev -
Create a SCSS file, and import the “main” Bootstrap stylesheet in a resources/sass/app.scss file:
@import "bootstrap/scss/bootstrap";
- Update your vite.config.js file to reference this SCSS file:
input: [
- 'resources/css/app.css',
+ 'resources/sass/app.scss',
'resources/js/app.js',
]
- Then include that file in the
@vitedirective in your layout template:
@vite(['resources/sass/app.scss'])
You should then have a web page with Bootstrap styling.
This isn’t Bootstrap-specific advice, but when working with libraries such as Bootstrap, as I’m creating templates, I’ll extract common patterns (such as buttons, cards, etc) to Blade components:
<x-card>
<x-slot:header>Card header</x-slot:header>
<x-slot:body>
<p class="card-text">Card body.</p>
</x-slot:body>
<x-slot:footer>Card footer</x-slot:footer>
</x-card>
That way, mark-up for components are isolated to one file (the component itself) so that if say, a new version of Bootstrap was released and changed the names of classes, I’d only have to change the class names in the one component view, rather than everywhere in my application where I had copy-and-pasted mark-up for a card.