How to Install Bootstrap 5 in Laravel 13 with Vite and Sass

To use Bootstrap 5 in Laravel 13, install bootstrap, @popperjs/core and sass with npm, import the Bootstrap Sass file in your stylesheet and the Bootstrap JavaScript in resources/js/app.js, and load both through @vite in your Blade layout. A new Laravel 13 project uses Tailwind CSS by default, so this guide also shows what to change so the two do not clash.

Targets: Laravel 13 (PHP 8.3 to 8.5), Vite, Node.js and Bootstrap 5.3. Check the Bootstrap documentation for any newer 5.x notes.

Step 1: Install the packages

npm install bootstrap @popperjs/core
npm install --save-dev sass

Bootstrap's components (dropdowns, tooltips, popovers) need Popper. The sass package lets Vite compile Bootstrap's Sass source, which allows you to customize variables.

Step 2: Create the Sass file

Create resources/sass/app.scss:

// Optional: override Bootstrap variables here, before the import
$primary: #0d6efd;
$border-radius: 0.5rem;

@import 'bootstrap/scss/bootstrap';

Variables must be defined before Bootstrap is imported, otherwise the defaults win. Recent versions of the Sass compiler print deprecation warnings for @import inside Bootstrap's own files. These warnings do not stop the build, and Bootstrap's documentation describes how it handles them in newer releases.

Step 3: Import the JavaScript

Open resources/js/app.js and add:

import * as bootstrap from 'bootstrap';

window.bootstrap = bootstrap;

Importing the whole package adds all components. To keep the bundle small, import only what you need, for example import { Modal, Dropdown } from 'bootstrap';.

Step 4: Update the Vite configuration

Open vite.config.js and point the Laravel plugin to the new Sass file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

A fresh Laravel project also includes the Tailwind plugin in this file. If you want Bootstrap only, remove the Tailwind import and plugin line and stop using Tailwind classes. Using both frameworks in the same pages is possible but creates conflicting styles, so choose one for each project.

Step 5: Load the assets in Blade

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div class="container py-5">
        <h1 class="mb-4">Hello Bootstrap 5</h1>
        <button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-title="It works">Hover me</button>
    </div>
</body>
</html>

Tooltips need one line of JavaScript to start. Add this to app.js after the imports:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => new bootstrap.Tooltip(el));

Step 6: Run the build

npm run dev

Keep it running while you develop. Before deploying, run npm run build to create the production files in public/build.

Can I use Bootstrap components in Blade?

Yes. Bootstrap is plain HTML and CSS classes, so you can write its markup directly in Blade views. For repeated parts such as a card or an alert, wrap the markup in a Blade component with php artisan make:component Alert and reuse it across pages. This keeps your views short and your markup consistent.

How do I check that it works?

1. Open the page. The heading and the blue button should have Bootstrap styles.
2. Hover the button and confirm the tooltip appears. That proves the JavaScript and Popper are loaded.
3. Open the browser developer tools network tab and check that CSS and JS files load without 404 errors.

Common mistakes

• Vite manifest not found: run npm run dev or npm run build, and make sure the paths in @vite match vite.config.js.
• Components do nothing: the Bootstrap JavaScript is not imported, or Popper is missing.
• Variable overrides ignored: define them before the Bootstrap import.
• Old CSS still showing: stop and restart the dev server, and hard-refresh the browser.
• Mixing Tailwind and Bootstrap: both reset base styles and use overlapping class names.

FAQ

Can I use the Bootstrap CDN instead?

Yes, with two tags in the layout. The npm and Vite setup is better when you want to customize Sass variables or keep versions pinned.

Is there a ready-made scaffold for Bootstrap in Laravel 13?

The official starter kits use Tailwind. For Bootstrap, the manual setup above is simple and gives you full control.

How do I use Bootstrap icons?

Install bootstrap-icons with npm and import its CSS file in your Sass file or use its SVG sprite.

References

• Bootstrap 5.3: Build tools with Vite
• Bootstrap 5.3: Sass customization
• Laravel 13 Vite