Laravel is a free and open-source PHP framework that provides a set of tools and resources to build modern PHP applications.
Bootstrap is a CSS framework for developing responsive channeled at responsive mobile-first front-end web development. Bootstrap 5 is the most recent version of bootstrap. Some of it features includes: jquery support, improved grid system, improved documentation amongst many others.
Vite (the French word for “quick”, pronounced /vit/ , like “veet”) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
How to install bootstrap 5 in Laravel 9 with vite
Below are 7 steps on how to install bootstrap 5 in laravel 9. This write-up considers that you have already installed laravel in your computer. If your haven’t, here is a link to my blog on how to set up and install laravel: https://tawahpeggy.com/environment-setup-and-laravel-installation/
Step 1: Install Laravel UI for bootsrap 5
Head on to your terminal and cd into your laravel project directory. Type the command
composer require laravel/ui
Step 2: Set up Auth Scaffolding with Bootstrap 5
Here we install the bootstrap package using the following command
php artisan ui bootstrap –auth
Step 3: Import vite.config.js Bootstrap 5 Path
Go to the vite.config.js file and type this code
Step 4: Import Bootstrap 5 SCSS in JS Folder
Go to the resources > js >app.js
Step 5: Replace mix() with @vite Blade directive
Go to resources > views > layouts > app.blade.php
Use @vite([‘resources/js/app.js’])
Step 6: Running vite command to build Asset file
Go to your terminal and type npm run and later npm run build
.npm run
npm run build
Step 7: Start the local server
Now open a new terminal and run the following command php artisan serve to start the server
Navigate to the following link http://localhost:8000/
Congratulations!! You have finally setup bootstrap 5 into your laravel project.
In case of any doubt, you can get in touch by leaving your thoughts in the comment below.