Add Bootstrap 5 to Laravel 11 with Vite

1 year ago admin Laravel

In this tutorial, we will see how we can install Bootstrap 5 in Laravel 11 with Vite, the process is simple and easy just follow all the steps carefully.


Install the package

I have already my Laravel 11 app installed we need now to add Bootstrap 5 first of all run these 2 commands :

  1. npm i --save bootstrap @popperjs/core
  2. npm i --save-dev sass

Next, we will create a new folder inside the resources folder and give it sass as a name.

Inside the sass, folder add a new file and give it app.scss as a name.

Put the code below inside the file: 

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

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

Create _variables.scss file

Inside the sass, folder add a new file and give it _variables.scss as a name.

Put the code below inside the file: 

                                                        
                                                                                                                        
// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

Update the file app.js

Next, we will import the file app.scss inside the file app.js so add the following line on the top of the app.js.

                                                        
                                                                                                                        
import '../sass/app.scss';

Add bootstrap path to vite

Next, we will update the file vite.config.js, and add the path to bootstrap.

                                                        
                                                                                                                        
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },
});


Update the welcome page

Inside your welcome page update the content and add a link to the app.js file, run your server you will see red text which means that everything is working fine.

Demo

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

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row my-5">
                <div class="col-md-8 mx-auto">
                    <h1 class="text-danger"> Add Bootstrap 5 to laravel 11 with vite</h1>
                </div>
            </div>
        </div>
        @vite('resources/js/app.js')
    </body>
</html>

Related Tuorials

How to Add a Relationship to a Select in Filament

In this lesson, we will see how to add a relationship to a select in Filament.Let's assume that we h...


How to Generate Slugs from a Title in Filament

In this lesson, we will see how to generate slugs from a title in Filament, Sometimes we need to gen...


How to Change the Order of the Filament Left Navigation Menu Items

In this lesson, we will see how to change the order of the filament left navigation menu items.Somet...


How to Hide the Info Widget on the Filament Dashboard

In this lesson, we will see how to hide the info widget on the Filament dashboard. The info widget i...


How to Add Bootstrap 5 to Laravel 12 with Vite

In this tutorial, we will see how to add Bootstrap 5 to Laravel 12 with Vite, The process is simple...


How to Add Middleware in Laravel 12

In this tutorial, we will see how to add middleware in Laravel 12, Now we can use bootstrap/app.php...


How to Add React js to Laravel 12 with Vite

In this tutorial, we will see how to add React JS to Laravel 12 with Vite. Since version 9.19, Larav...


How to Add Vue js 3 to Laravel 12 with Vite

This tutorial will show us how to add Vue js 3 to Laravel 12 with Vite. Since version 9.19, Laravel...


How to Show the Old Values in Multiple Select Options in Laravel

In this lesson, we will see how to show the old values in multiple select options when editing in La...


How to Get the Old Value of the Select in Laravel

In this lesson, we will see how to get the old value of the select when editing in Laravel, this app...