Get Started with Bootstrap 5 in Laravel 11: A Step-by-Step Guide
In this tutorial , we will learn how To install Bootstrap in a Laravel project.You can follow this guide and install it to multiple laravel version like laravel 8, laravel 9, laravel 10 and and laravel 11.We will install it bys using npm and integrate it into the application using Vite for asset bundling,
Install Bootstrap and SASS
Run the following commands in your terminal to install Bootstrap and SASS
npm install i -D bootstrap@5.3.3
npm install -D sass
Import Bootstrap SCSS:
Create an SCSS file (e.g., resources/scss/app.scss ) if you haven't already, and import Bootstrap's SCSS file into it:
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
Set up JavaScript Integration
Import Bootstrap's JavaScript functionality into your JavaScript file (e.g., resources/js/app.js ):
import './bootstrap';
import '../sass/app.scss';
import * as bootstrap from 'bootstrap';
Include Bundled Assets in Your Laravel Blade File
In your Laravel Blade file (e.g., resources/views/layouts/app.blade.php ), include the bundled CSS and JavaScript files:
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
Output
