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
