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.
-
New laravel project installing
-
Laravel UI for bootstrap installing
-
Auth Scaffolding with Bootstrap
-
NPM Dependencies installing
-
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