How to Add Bootstrap 5 to Laravel 10 with Vite

In today's lesson, we are going to see how to add Bootstrap 5 to Laravel 10 with Vite. The process is simple and easy just follow all the steps carefully.

Install Bootstrap 5 in Laravel 10

So I already have my Laravel 10 app installed. We need to add Bootstrap 5 first. All you need to do is 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 bootstrap.js

Next, we will import the file app.scss and bootstrap inside the file bootstrap.js, so add the following lines at the top of the file.

import '../sass/app.scss';
import * as bootstrap from 'bootstrap';

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';
import path from 'path';

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, next run your server you will see a red button, which means that everything is working fine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>
    <div class="container">
        <div class="row my-4">
            <div class="col-md-4 mx-auto">
                <div class="btn btn-danger">
                    Hello There
                </div>
            </div>
        </div>
    </div>
    @vite(['resources/js/app.js'])
</body>
</html>