Skip to content

All topics  /  Laravel

Laravel 11 Install Bootstrap 5 with Vite Example

Laravel ·

When “Laravel 11 Install Bootstrap 5 with Vite Example” moves through design, development and browser testing, this operations example can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

Hi, Dev

In this post, I will guide you through the process of installing Bootstrap 5 in a Laravel 11 project using Vite.

If you're looking to integrate Bootstrap 5 with Laravel 11 via Vite, follow these step-by-step instructions. I'll explain how to add Bootstrap 5 using npm and Vite, making the setup straightforward. Let's get started!

Let's see the following steps:

Step for Laravel 11 Vite Install Bootstrap 5


Step 1: Install Laravel 11

Step 2: Install Laravel UI Package

Step 3: Install Bootstrap

Step 4: Install Bootstrap Icon

Step 5: Build CSS & JS File

Step 6: Use Bootstrap Class

Run Laravel App

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">NiceSnippets.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 11 Install Bootstrap 5 with Vite 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:

More on this topic