How to Install Bootstrap 5 in Laravel 12 with Vite

In this Laravel 12 tutorial, you’ll learn how to install Bootstrap 5 in laravel 12 with Vite and set it up properly for your application. Bootstrap 5 is one of the most popular front-end frameworks for building responsive and beautiful web applications. Laravel 12, the latest version of the Laravel framework, comes with Vite as its default build tool, making it incredibly easy to integrate Bootstrap into your application.

In this comprehensive guide, we’ll walk through the step-by-step process of installing and configuring Bootstrap 5 in Laravel 12 using Vite. This tutorial is designed for beginners and includes practical examples and troubleshooting tips.

What is Vite and Why Use It?

Vite is a modern build tool that provides an extremely fast development experience. In Laravel, Vite handles the compilation of your SCSS and JavaScript files into optimized CSS and JS assets.

Benefits of using Vite with Bootstrap:

Hot Module Replacement (HMR): See changes in your browser instantly without manual refresh
Lightning-fast builds: Optimized asset compilation
Minification: Automatic optimization for production
SCSS support: Seamlessly compile SCSS to CSS
Easy configuration: Minimal setup required

Step 1: Install Laravel 12 Project

If you don’t already have a Laravel 12 project, create one using the Laravel installer:

composer create-project laravel/laravel bootstrap-vite

Read Also : Laravel 12 How to Install SweetAlert2 With Vite

Step 2: Install Bootstrap 5 and Dependencies

Next, install the Laravel UI package. The composer require laravel/ui command installs the Laravel UI package, which offers ready-made frontend scaffolding for frameworks like Bootstrap, Vue, and React. It’s mainly used to quickly generate authentication routes and views in a Laravel project.

composer require laravel/ui

This command downloads and installs the laravel/ui package and its dependencies into your Laravel project, allowing you to access its features. Generating UI Scaffolding.

Step 3: Install Bootstrap 5.3

After installing the laravel/ui package, you can use Artisan commands to generate the desired frontend scaffolding:

php artisan ui bootstrap

If you want to include Bootstrap Icons, run:

npm install bootstrap-icons --save-dev

Now install popperjs/core, it allows you to use Bootstrap’s styles and JavaScript features (like modals, dropdowns, tooltips) in your Laravel application.

npm install bootstrap @popperjs/core

After installation, make sure Bootstrap CSS are correctly imported inside your Laravel resources\sass\app.scss.

// Fonts
@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';

Step 4: Build CSS and JS Files

This command Install all required frontend dependencies:

npm install

Then compile your css and JS using Vite:

npm run build

Read Also : Laravel 12 Bootstrap Auth Scaffolding Tutorial Step by Step

Step 5: Use Bootstrap Classes

Update your welcome.blade.php file. Since Laravel ships with optional Tailwind CSS by default, remove the Tailwind markup and replace it with Bootstrap classes as needed for your homepage layout.

<!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 Vite - ItStuffSolutiotions</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="#">ItStuffSolutiotions</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 my-5">

        {{-- Alerts --}}
        <div class="alert alert-success">Bootstrap 5.3.8 Loaded Successfully!</div>
        <div class="alert alert-primary">This is a primary alert.</div>

        {{-- Buttons --}}
        <div class="mb-4">
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-outline-dark">Outline</button>
        </div>

        {{-- Cards --}}
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Card Title One</h5>
                        <p class="card-text">This is a short description inside the card.</p>
                        <a href="#" class="btn btn-primary btn-sm">Read More</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Card Title Two</h5>
                        <p class="card-text">This card includes a button and sample text.</p>
                        <button class="btn btn-success btn-sm">Explore</button>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title">Card Title Three</h5>
                        <p class="card-text">Another clean Bootstrap card layout.</p>
                        <button class="btn btn-outline-primary btn-sm">Details</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

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

</body>
</html>

Step 6: Run Laravel App

Once everything is set up, start the Laravel development server:

php artisan serve

Visit the URL (http://127.0.0.1:8000/) shown in the terminal, and your Laravel 12 application will now be running with Bootstrap 5 integrated successfully.

Conclusion

Installing Bootstrap 5 in Laravel 12 with Vite is simple and flexible. You just need to install Bootstrap via npm, import Bootstrap files in your resources, update Vite config, and compile the assets. This setup ensures faster builds, cleaner asset handling, and modern front-end support.

Table of Contents