How to Install Bootstrap 5 in Laravel 11 with Vite

Hello, Laravel Web developers! In this article, we'll see how to install Bootstrap 5 in laravel 11 with Vite. Here, we'll install Vite in laravel 11 with Bootstrap 5. Vite is a modern front-end build tool that provides an extremely fast development environment and bundles your code for production.

Laravel integrates seamlessly with Vite by providing an official plugin and Blade directive to load your assets for development and production.

If you are developing a Single Page Application (SPA), including those developed with tools like Inertia, Vite will be the perfect fit.

Laravel 11 Install Bootstrap 5 with Vite

Laravel 11 Install Bootstrap 5 with Vite


Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel example-app


Step 2: Install Laravel UI Package

Next, we'll install the laravel UI package to install Bootstrap with auth.

composer require laravel/ui


Step 3: Install Bootstrap 5

Then, we'll install bootstrap 5 using the following command.

php artisan ui bootstrap


Step 4: Install Bootstrap Icon

Now, we'll install the bootstrap icon using the following command.

npm install bootstrap-icons --save-dev


/* Fonts */
@import url('');

/* Variables */
@import 'variables';

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


Step 5: Build CSS & JS File

Then, we'll build CSS & JS using the following command.

npm install
npm run build


Step 6: Use Bootstrap Class

Next, we'll update the welcome.blade.php file and use the bootstrap class.


<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('', 'Laravel') }} - Techsolutionstuff</title>

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])

    <style type="text/css">
            font-size: 50px;

    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
                <svg xmlns="" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
                <span class="fs-4">How to Install Bootstrap 5 in Laravel 11 with Vite - Techsolutionstuff</span>

        <div class="p-5 mb-4 bg-body-tertiary rounded-3">
            <div class="container-fluid py-5">
                <h1 class="display-5 fw-bold">Laravel/Vite Bootstrap 5 Example</h1>
                <p class="col-md-8 fs-4">This simple jumbotron example is based on one of the official Bootstrap 5 examples.</p>
                <a class="btn btn-primary btn-lg" href="">
                    View on

        <div class="row align-items-md-stretch">
            <div class="col-md-6">
                <div class="h-100 p-5 bg-body-tertiary border rounded-3">
                    <h2>Some borders</h2>
                    <i class="bi bi-bag-heart-fill"></i>
                    <i class="bi bi-app"></i>
                    <i class="bi bi-arrow-right-square-fill"></i>
                    <i class="bi bi-bag-check-fill"></i>
                    <i class="bi bi-calendar-plus-fill"></i>

        <footer class="pt-3 mt-4 text-body-secondary border-top">
            © {{ date('Y') }}



Step 7: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.

php artisan serve


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.