Reader Stacks
Laravel

How to Use Bootstrap 5 in a Laravel Project

Bootstrap 5 dropped its jQuery dependency, making it a genuinely clean fit for Laravel's default Vite-based asset pipeline — install via npm, import, and build.

Published
May 3, 2022
Updated
Aug 3, 2026
By
Reader Stacks Editorial

Bootstrap 5 dropped its jQuery dependency (a requirement in Bootstrap 4 and earlier), which makes it a genuinely clean fit for Laravel's default Vite-based frontend build pipeline, without needing to also pull in jQuery just to make Bootstrap's own JavaScript components work.

Installing Bootstrap via npm

npm install bootstrap @popperjs/core

@popperjs/core is a separate required dependency — it powers Bootstrap's positioning logic for tooltips, popovers, and dropdowns, and isn't bundled inside the main Bootstrap package itself.

Importing Bootstrap's CSS and JS in your app entry file

// resources/js/app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import * as bootstrap from 'bootstrap';

window.bootstrap = bootstrap;

Attaching Bootstrap to window makes it accessible from inline data-bs-* attribute-driven components directly in Blade templates, matching how Bootstrap's own documentation examples typically expect it to be available.

Building the assets

npm run dev    // for local development
npm run build  // for a production build

Including the compiled assets in your Blade layout

@vite(['resources/css/app.css', 'resources/js/app.js'])

Using Bootstrap components in a Blade view

Bootstrap's data-bs-* attributes work directly in Blade markup exactly as they would in a plain HTML page — Blade doesn't interfere with them at all, since they're just standard HTML attributes as far as Blade's own templating is concerned.

Using the older CDN approach instead, if preferred

A CDN link is simpler to wire up for a very small project or a quick prototype, but the npm/Vite approach gives version control over the exact Bootstrap build, integrates with your existing asset pipeline, and avoids a dependency on a third-party CDN's uptime for a production application.

Customizing Bootstrap's Sass variables, for real customization beyond the default theme

// resources/scss/app.scss
$primary: #6366f1;

@import 'bootstrap/scss/bootstrap';

Importing Bootstrap's actual Sass source (rather than the pre-compiled CSS) and overriding its variables before the import is what allows genuine customization of Bootstrap's default color scheme and design tokens, rather than fighting the compiled CSS with your own overriding rules afterward.