How To Install Bootstrap 5 In Laravel 11 With Vite?

In this post, I will show you How to Install Bootstrap 5 in Laravel 11 with Vite.

If you want to install bootstrap 5 using vite in laravel 11. Then i will help you to explain step by step add bootstrap 5 with npm vite. so, let’s follow the below step to add bootstrap in laravel 11 application. You can learn Laravel 11 Display Image from Storage Folder Example

Let’s see the following steps :

Step for How to Install Bootstrap 5 in Laravel 11 with Vite

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install Laravel UI Package

Here, we will install laravel ui package that allow to install bootstrap with auth. so, let’s run following command:

composer require laravel/ui

Step 3: Install Bootstrap

Here, we will add bootstrap with auth scaffolding. so, let’s run following command:

php artisan ui bootstrap

Step 4: Install Bootstrap Icon

In this step, we will add bootstrap icon. so, let’s run following command:

npm install bootstrap-icons --save-dev

now, import icon css on resources\sass\app.scss file as like the below code:

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 5: Build CSS & JS File

In this step, we will build css and js file. so, let’s run following two commands:

npm install
   
npm run build

Step 6: Use Bootstrap Class

Here, we will update welcome.blade.php file and use bootstrap class.

resources\view\welcome.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <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('app.name', 'Laravel') }}</title>

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

    <style type="text/css">
        i{
            font-size: 50px;
        }
    </style>
    
</head>
<body>

<main>
    <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="http://www.w3.org/2000/svg" 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">DevScriptSchool.com Tutorial</span>
            </a>
        </header>

        <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="https://getbootstrap.com/docs/5.3/examples/jumbotron/">
                    View on getbootstrap.com
                </a>
            </div>
        </div>

        <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>
                </div>
            </div>
        </div>

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

</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Output: