Add Bootstrap 5 to Laravel 11 with Vite

7 months 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 Conditionally Include a Blade Template in Laravel

In this lesson, we will see how to conditionally include a blade template in Laravel.Sometimes,...


How to Include a Blade Template Only if it Exists in Laravel

In this lesson, we will see how to include a blade template only if it exists in Laravel.Sometimes,&...


How to Pass a Variable to Include in Laravel

In this lesson, we will see how to pass a variable to include in Laravel. Sometimes, we want to pass...


How to the Get the Previous and Next Posts in Laravel

In this lesson, we will see how to get the previous and next posts in Laravel, sometimes when you ge...


How Do you Format a Number as K/M/B in Laravel

In this lesson, we will see how to format a number as K/M/B in Laravel, sometimes we want to display...


How to Override Laravel Fortify Default Registration Redirect

In this lesson, we will see how to override Laravel Fortify default registration redirect, sometimes...


How to Override Laravel Fortify Default Login Redirect

In this lesson, we will see how to override Laravel Fortify default login redirect, sometimes when w...


How to Use the Same Validation Form Request for both Create and Update in Laravel

In this lesson, we will see how to use the same validation form request for both create and update i...


How to Get Raw SQL Output from the Eloquent Model in Laravel 11

In this lesson, we will see how to get raw SQL output from the eloquent model in Laravel 11, sometim...


How to Check if a Record Does Not Exist in Laravel

in this lesson, we will see how to check if a record does not exist in laravel, sometimes you need t...