Using Bootstrap 5 in a Laravel Project

Adding Bootstrap 5 to a Laravel project goes through Laravel's standard front-end build tooling (Vite, in current Laravel versions) — the one genuinely important detail is that Bootstrap 5 dropped jQuery as a dependency entirely, a real breaking change from Bootstrap 4.

Installing Bootstrap and its build dependency

npm install bootstrap @popperjs/core sass

@popperjs/core is required for Bootstrap components relying on dynamic positioning (dropdowns, tooltips, popovers) — sass is needed since Bootstrap's own source files are written in Sass, not plain CSS, and need to be compiled.

Importing Bootstrap's styles

// resources/sass/app.scss
@import 'bootstrap/scss/bootstrap';

Importing Bootstrap's JavaScript

// resources/js/bootstrap.js
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

Configuring Vite to build the Sass file

// vite.config.js
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Including the compiled assets in a Blade layout

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

Building the assets

npm run dev    # development, with hot reload
npm run build  # production build

The critical Bootstrap 4 → 5 breaking change: no more jQuery

// Bootstrap 4 style (jQuery-based) — does NOT work in Bootstrap 5
$('#myModal').modal('show');

// Bootstrap 5 style (vanilla JS)
const modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();

This is the single most common source of confusion when following an older tutorial or copying a code snippet — Bootstrap 5 components are initialized and controlled via plain JavaScript classes instead, and any jQuery-based Bootstrap 4 snippet needs to be rewritten, not just copy-pasted, to work correctly in Bootstrap 5.

Using Bootstrap components via data attributes (no JS needed)

    Open Modal

For many common interactions (opening a modal, toggling a dropdown), Bootstrap 5's data-attribute API (data-bs-*, note the new bs- prefix distinguishing it from Bootstrap 4's plain data-* attributes) works without writing any custom JavaScript at all.

Customizing Bootstrap's theme via Sass variables

// resources/sass/app.scss — override BEFORE importing Bootstrap
$primary: #6366f1;
$border-radius: 0.5rem;

@import 'bootstrap/scss/bootstrap';

Sass variable overrides must be declared before the @import line to take effect — Sass variables aren't reassignable after their initial definition the way a normal CSS custom property is, so the override order here genuinely matters, not just for style preference.