Add Bootstrap 5 to Laravel 11 with Vite
In this tutorial, we will see how we can install Bootstrap 5 in Laravel 11 with Vite, the process is simple and easy just follow all the steps carefully.
Install the package
I have already my Laravel 11 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 app.js
Next, we will import the file app.scss inside the file app.js so add the following line on the top of the app.js.
import '../sass/app.scss';
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';
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, run your server you will see red text which means that everything is working fine.
<!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</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="row my-5">
<div class="col-md-8 mx-auto">
<h1 class="text-danger"> Add Bootstrap 5 to laravel 11 with vite</h1>
</div>
</div>
</div>
@vite('resources/js/app.js')
</body>
</html>