How To Install Bootstrap 5 CSS With Laravel & Vite

Get up and running in just a few minutes with Bootstrap 5, Laravel 9 and live hot loading with Vite.

Note: For this article we’re using XAMPP with a VHOST domain setup as vsbootstrap.local. If you need help setting up an Apache VHOST to work with XAMPP and Laravel, check out our tutorial here.

1) Create a new DB

2) Create new Laravel project

composer create-project laravel/laravel vs-bootstrap

3) Update .env: DB credentials and APP_URL

4) Install node modules

npm install

5) Run migrations

php artisan migrate

6) Check that your environment and project have been setup correctly:

npm run dev

Visiting the address vsbootstrap.local should now show you the default laravel welcome page.

7) Note: In order for hot reloading to work, add the @vite directive to the head of your blade layout template:

...
@vite(['resources/css/app.css', 'resources/js/app.js'])

8) Install bootstrap via NPM

npm install bootstrap@v5.2.3

9) Install sass via NPM

npm install sass

10) Update your vite.config.js (path var and alias), should look something like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
const path = require('path');

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

11) Create a scss file in /resources/scss/app.scss and import the bootstrap css:

@import "~bootstrap/scss/bootstrap";

12) Import the scss in your /resources/js/app.js file:

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

13) You should now have bootstrap css running with laravel and vite. You may need to restart vite (ctrl+c to exit if it’s already running). For a quick test, try editing the welcome.blade.php to look something like this:

<!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, Vite and Bootstrap</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased p-4">
<div class="alert alert-success">
    I'm a bootstrap alert!</div>
<h1 class="text-center">Hello Bootstrap</h1>
<p class="mt-5 text-center">
    <a href="#" class="btn btn-success">I'm a bootstrap button!</a>

</body>
</html>

Project files are available on github.

14) For production builds (npm run build), if your blade files use Vite::assets, put this in your app.js :

import.meta.glob([

'../images/**',

]);

Without the above you will get the error ‘Unable to locate file in Vite manifest: …’,

For more info on this, see https://laravel.com/docs/9.x/vite#blade-processing-static-assets

Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *