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 have already my Laravel 10 app installed we need now 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 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>