How to Install Bootstrap 5 in Laravel 9 With Vite

Bootstrap

Its a website development framework it use for develop front end of any website. Its main function is to provide any website responsiveness which simple mean run any website on mobiles and all other devices properly.

We can also say that it helps developers to build there website in less time because Bootstrap provide us HTML, CSS and JAVASCRIPT-Based Scripts which use to provide functionality of responsiveness to our websites.

The current version bootstrap is 5.

Bootstrap Features:

I. Simple to use

Its very simple to use we need know about its classes which provide all the functionality of responsiveness and give us a awesome website design.

ii. Old Css

Bootstrap not only providing LESS files but also providing old css files.

iii. Customizable

Bootstrap is designed for responsiveness it provide us 12 Columns grid, a huge range of components, layouts and many build examples of codes. We can also customize CSS code of bootstrap as we want.

iv. Bootstrap Components

Some bootstrap components are listed below:

• Alerts

• Badges

• Cards

• Buttons

• Carousal

• Forms

• Input groups

• List groups

• Models

• Paginations

vi. Templates of Bootstrap

Google provide us many responsive and creative websites templates and admin panel templates. We can easily download and modify as we want.

What is Vite

Vite is a next generation frontend tooling. Its aims to provide a faster and leaner development experience for modern web projects.

Features of Vite

• Instant Server Start

• Hot Module Replacement

• Optimized Build

• Universal Plugins

• Fully Typed APIs

After the updation of laravel 9.19 webpack is removed and new feature Vite is added which is used to build frontend of applications.

In this tutorial we will discus how to install bootstrap in our laravel 9 project with simple steps.

How to Install Bootstrap 5 in Laravel 9 With Vite

Following steps are required for installation of bootstrap with vite.

1. New laravel project installing

2. Laravel UI for bootstrap installing

3. Auth Scaffolding with Bootstrap

4. NPM Dependencies installing

5. Installing NPM run build

Step 1: New laravel project installing

Firstly we need to install a new laravel project.

composer create-project laravel/laravel BootstrapVite

If installed the laravel globally then run this command for new project

laravel new BootstrapVite

Step 2: Laravel UI for bootstrap installing

For UI installation of laravel run given command:

 composer require laravel/ui 

 

Step 3: Auth Scaffolding Bootstrap

For bootstrap UI for auth run this command to install

php artisan ui bootstrap –auth

Step 3: NPM Dependencies installing

For frontend installation run the given command:

npm install

Step 4: Installing NPM run build

Run the given command which install all css and javascripts files and store into project:

npm run build

Thank for reading this tutorial!

Login and Registration system in php

Laravel 9 Crud System