Get Started with Bootstrap 5 in Laravel 11: A Step-by-Step Guide

How to Install Bootstrap in a Laravel Project

In this tutorial, we will learn how to install Bootstrap in a Laravel project. You can follow this guide to install it in multiple Laravel versions like Laravel 8, Laravel 9, Laravel 10, and Laravel 11. We will install it 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 -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";

Import Bootstrap SCSS:

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