Install Bootstrap 5 in Laravel 12 with Vite (Step-by-Step)

Why Use Bootstrap 5 with Laravel 12 and Vite?

Bootstrap 5 remains one of the most trusted and widely-used front-end frameworks in 2025–2026, and pairing it with Laravel 12's default Vite bundler creates a powerful, modern development stack. If you're just getting started with Laravel 12 or upgrading from an older version, setting up Bootstrap correctly from the start saves significant time. Here's why this combination is ideal for building responsive, professional Laravel applications:

• Rapid UI Development: Bootstrap provides dozens of pre-built, customizable components (navbars, modals, cards, forms, grids) — so you spend less time on CSS and more on Laravel's backend logic, authentication, and APIs.
• Mobile-First & Responsive by Default: Bootstrap 5's flexbox-based grid and utilities ensure your app looks perfect on phones, tablets, and desktops without extra media queries.
• Lightning-Fast Builds with Vite: Laravel 12 uses Vite as the default bundler, delivering near-instant hot module replacement (HMR), faster compilation, and smaller production bundles — perfect for modern workflows. This is a major improvement over the older Laravel Mix approach.
• Full JavaScript Interactivity: With Popper.js included, Bootstrap 5 powers tooltips, dropdowns, popovers, and modals seamlessly via imported JS modules — no jQuery dependency required.
• Community & Resources: Huge ecosystem of free templates, themes, and documentation means you can prototype quickly or scale to complex dashboards and admin panels.

Whether you're building a SaaS app, e-commerce site, or internal tool, integrating Bootstrap 5 via the bootstrap-vite preset saves hours of setup and delivers production-ready styling instantly. Once you have Bootstrap set up, you can move on to more advanced topics like routing and middleware or building REST APIs. Let's dive into the easy installation steps below.

Table Of Content

1 What You’ll Need

• PHP 8.2+
• Composer
• Node.js & NPM
• Basic knowledge of Blade templates

2 Introduction

Bootstrap 5 remains a top choice for responsive, mobile-first web design, powering millions of websites worldwide. Laravel 12 ships with Vite as the default asset bundler — replacing Laravel Mix with a faster, more modern build tool that supports hot module replacement (HMR) and optimized production builds out of the box.

The easiest way to integrate Bootstrap 5 is the bootstrap-vite preset, which auto-configures SCSS, JavaScript, and Vite for you. Unlike manual installation methods where you download Bootstrap files, configure PostCSS, and wire up JavaScript imports yourself, this preset handles everything in a single Artisan command.

In this guide, you'll set up Bootstrap 5 in a fresh Laravel 12 project in minutes. By the end, you'll have a fully functional Bootstrap-powered Laravel application with working modals, navbars, and responsive layouts. If you're upgrading from Laravel 11, check our common Laravel 12 errors guide to avoid pitfalls during migration.

3 Install Laravel Project

First, ensure Composer is installed on your system. If you don't have it, download it from getcomposer.org. You'll also need PHP 8.2 or higher — Laravel 12 requires it as the minimum version. Use the following command to create a fresh Laravel 12 project:

composer create-project laravel/laravel:^12.0 laravel12-bootstrap-vite

This command downloads the latest Laravel 12 release and installs all PHP dependencies. Once complete, navigate to your project directory:

cd laravel12-bootstrap-vite

At this point, you have a vanilla Laravel 12 application with Vite pre-configured but no CSS framework installed yet. The default resources/css/app.css and resources/js/app.js files are minimal. In the next step, we'll replace this setup with a full Bootstrap 5 integration.

4 Install the Bootstrap-Vite Package

What Is the Bootstrap-Vite Package?
The Bootstrap-Vite preset for Laravel is an official frontend scaffolding package that automates the entire Bootstrap 5 setup process. Instead of manually editing multiple configuration files, this package handles everything in one step:

• Installs Bootstrap 5 and Popper.js (required for dropdowns/tooltips)
• Configures Vite for compiling SCSS & JS with proper paths
• Generates ready-to-use app.scss and app.js files
• Updates vite.config.js automatically with correct input entries
• Modifies your Blade layout to include the @vite directive
• Provides a consistent Bootstrap development workflow

This makes it the quickest and most reliable way to start using Bootstrap 5 in your Laravel 12 project. Run the following Artisan command:

    
       php artisan preset bootstrap-vite
    

This command performs the following automatically:
✔ Installs Bootstrap 5 and adds it to package.json
✔ Installs Popper.js as a dependency
✔ Creates resources/sass/app.scss with Bootstrap imports
✔ Updates resources/js/app.js with Bootstrap import
✔ Updates vite.config.js input paths
✔ Updates Blade layout with @vite directive
✔ Cleans up old unnecessary CSS assets

Note: If you encounter errors during this step, make sure your Laravel installation is clean and you haven't modified the default Vite configuration. See our troubleshooting guide for common Laravel 12 errors for help.

5 Install Node Dependencies

After the preset has configured your project files, you need to install the JavaScript dependencies defined in package.json. This step downloads all the required packages to your local node_modules folder.
Run:

    
       npm install
    

This installs the following key packages:

• bootstrap — The full Bootstrap 5 framework (CSS + JS)
• @popperjs/core — Required for positioning tooltips, dropdowns, and popovers
• sass — The SCSS compiler that Vite uses to process Bootstrap's source files
• Vite and Laravel Vite plugin — The build toolchain for compiling and bundling assets

If the installation fails, ensure you have Node.js 18+ and NPM 9+ installed. You can verify your versions with node -v and npm -v.

6 Compile Assets Using Vite

With all dependencies installed, you can now compile your SCSS and JavaScript assets using Vite. Laravel 12 provides two compilation modes depending on your workflow.

For development (with hot reload):

    
       npm run dev
    

This starts Vite's development server with Hot Module Replacement (HMR). Any changes you make to SCSS or JS files are reflected instantly in the browser without a full page reload — making the development experience significantly faster than the old Laravel Mix workflow.

For production (optimized build):

    
       npm run build
    

This creates minified, versioned assets in the public/build directory. Vite automatically applies tree-shaking, code splitting, and CSS purging to reduce file sizes. Always run this command before deploying to production. For more production optimization tips, see our guide on Laravel 12 performance optimization.

7 Check Your Generated SCSS File

The preset automatically creates an SCSS file that serves as the entry point for all your Bootstrap styles.

File location:
resources/sass/app.scss

Default content:

    
      @import "bootstrap/scss/bootstrap";
    

This single import statement pulls in the entire Bootstrap 5 SCSS source, which Vite then compiles into optimized CSS. You can customize Bootstrap by adding your own SCSS variables before the import line. For example, to change the primary color and enable rounded corners:

    
      // Custom Bootstrap variables (must be BEFORE the import)
      $primary: #6f42c1;
      $enable-rounded: true;
      $font-family-base: "Inter", sans-serif;

      @import "bootstrap/scss/bootstrap";

      // Your custom styles go AFTER the import
      .custom-card {
          border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
    

This approach lets you fully customize Bootstrap's look and feel while keeping the upgrade path clean. You can override any of Bootstrap's 500+ SCSS variables this way.

8 Check Your JavaScript File

The preset also configures the JavaScript imports needed for Bootstrap's interactive components to work.

File:
resources/js/app.js

The preset adds:

    
      import './bootstrap';
   

This imports the bootstrap.js file located in the same directory. Inside that file, you'll find:

    
      import * as bootstrap from 'bootstrap';
   

This wildcard import loads all Bootstrap JavaScript plugins, which enables the following interactive components out of the box:

• Dropdowns — Navigation menus and action menus
• Modals — Dialog boxes and confirmation popups
• Tooltips — Hover-triggered info tips (requires initialization via JS)
• Popovers — Click-triggered content bubbles (requires initialization via JS)
• Offcanvas — Slide-out side panels for navigation
• Alerts — Dismissible notification banners
• Accordions — Collapsible content sections

Important: Tooltips and Popovers require manual initialization in Bootstrap 5. Add this to your app.js if you need them:

    
      // Initialize all tooltips
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
      [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
   

9 Vite Config Is Auto-Updated

The preset automatically configures the Vite build tool so you don't have to edit any config files manually.

File:
vite.config.js

    
      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,
              }),
          ],
      });
  

Here's what each part does:

• input — Tells Vite which files to compile. The SCSS file handles all Bootstrap styles, and the JS file handles all Bootstrap interactivity.
• refresh: true — Enables automatic browser refresh when you modify Blade templates, routes, or other PHP files during development.

No manual configuration is needed — the preset handles this entire file. If you later need to add more entry points (for example, a separate admin stylesheet), simply add them to the input array.

10 Use Bootstrap in Your Blade Layout

The final wiring step connects your compiled Bootstrap assets to your Blade templates. The @vite directive tells Laravel to load the correct asset URLs — whether from Vite's dev server (during development) or from the compiled build directory (in production).

Ensure your resources/views/layouts/app.blade.php (or main layout) includes this in the <head> section:

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

This single directive replaces the old <link> and <script> tags you'd use with Laravel Mix. During development with npm run dev, it injects Vite's HMR client script for instant hot reloading. In production after npm run build, it generates versioned URLs with content hashes for effective browser caching.

If your project uses multiple layouts for different route groups, make sure to include the @vite directive in each layout file that needs Bootstrap styling.

11 Test Bootstrap with Sample Markup

Create a quick test in your Blade file:

    
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Install Bootstrap 5 in Laravel 12 with the Bootstrap-Vite Package  - Get Sample Code</title>
     {{-- Vite Assets --}}
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
 
<body>
 
    {{-- Navbar --}}
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">Get Sample Code</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <span class="navbar-toggler-icon"></span>
            </button>
 
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
 
    {{-- Main Section --}}
   <div class="container mt-5">
        <h1 class="text-primary">Bootstrap 5 Installed Successfully!</h1>
        <button class="btn btn-success mt-3" data-bs-toggle="modal" data-bs-target="#testModal">
            Open Modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="testModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Bootstrap Modal Working</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        Bootstrap & Vite are working perfectly in Laravel 12!
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Footer --}}
    <footer class="bg-light py-3 border-top mt-5">
        <div class="container text-center">
            <small>© {{ date('Y') }} getsamplecode.com. All rights reserved.</small>
        </div>
    </footer>
 
</body>
</html>
  

Reload the page — you should see Bootstrap styling and a working modal.

Related Laravel 12 Tutorials

Now that you have Bootstrap 5 running in Laravel 12, explore these related tutorials to build a complete, production-ready application:

12 Run Laravel Server to Test the App

With everything configured, start Laravel's built-in development server to test your Bootstrap integration:

php artisan serve

Visit http://127.0.0.1:8000 in your browser. You should see:

• A dark Bootstrap navbar with responsive hamburger menu on mobile
• A styled heading with Bootstrap's primary blue color
• A green "Open Modal" button that triggers a working Bootstrap modal
• A light-colored footer with proper spacing

If styles aren't loading, make sure you have npm run dev running in a separate terminal window alongside php artisan serve. Vite's dev server must be active during development. For production deployment, run npm run build instead — this generates static files that don't require the Vite dev server.

Troubleshooting tip: If you see a "Vite manifest not found" error, it means assets haven't been compiled yet. Simply run npm run build to fix it. For more solutions, check out our common Laravel 12 errors troubleshooting guide.

13 Conclusion

Using the bootstrap-vite preset is the fastest and most reliable path to integrating Bootstrap 5 in Laravel 12. With a single Artisan command, you get properly configured SCSS compilation, JavaScript module imports, Vite build optimization, and Blade template integration — all without touching a single config file manually.

This setup gives you access to Bootstrap 5's full component library including responsive grids, navbars, modals, forms, cards, and more, while benefiting from Vite's lightning-fast HMR during development and optimized production builds. Whether you're building dashboards, landing pages, admin panels, or full-featured web applications, this combination provides a solid, production-ready foundation.

Recommended next steps after setting up Bootstrap:

• Set up authentication with WorkOS AuthKit for secure user login
• Add multi-factor authentication (MFA/2FA) for enhanced security
• Learn Laravel 12 routing and middleware to structure your application
• Build a REST API for your Laravel backend
• Optimize your app with Laravel 12 performance tips
• Containerize your setup with Docker Compose for Laravel & MySQL

Happy coding! If you run into issues, our common Laravel 12 errors guide covers the most frequent problems and their solutions.

Frequently Asked Questions