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 and easy just follow all the steps carefully.
Install the packages
So, I already have my Laravel 12 application installed. We need to add Bootstrap 5. First of all, run these 2 commands :
- npm i --save bootstrap @popperjs/core
- 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 on 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 the 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>