How to install Bootstrap 5 in Laravel 9.19 with vite on windows.

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.

Leave a Comment

Your email address will not be published.