How to use Bootstrap Icons in Laravel Vite?
Hello Developer,
Are you looking for an example of how to install bootstrap icons in laravel. if you want to see an example of install bootstrap 5 icons in laravel then you are in the right place. you can see how to install bootstrap icons in laravel with vite. I would like to show you laravel vite bootstrap icons. So, let us see in detail an example.
If you want to install bootstrap 5 icons using vite in laravel 10. Then i will help you to explain step by step install bootstrap icons with npm vite. so, let's follow the below step to use bootstrap icons in laravel 10 application.
Let's see the following steps:
Step 1: Install Laravel 10 App
This step is not required; however, if you have not created the laravel app, then you may go ahead and execute the below command:
composer create-project laravel/laravel example-app
Step 2: Install Laravel UI Package
Here, we will install laravel ui package that allow to install bootstrap with auth. so, let's run following command:
composer require laravel/ui --dev
Step 3: Install Bootstrap Auth Scaffolding
Here, we will add bootstrap with auth scaffolding. so, let's run following command:
php artisan ui bootstrap --auth
Step 4: Install Bootstrap Icon
In this step, we will add bootstrap icon. so, let's run following command:
npm install bootstrap-icons --save-dev
now, import icon css on resources\sass\app.scss file as like the below code:
resources\sass\app.scss
/* Fonts */
@import url('https://fonts.bunny.net/css?family=Nunito');
/* Variables */
@import 'variables';
/* Bootstrap */
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
Step 5: Build CSS & JS File
In this step, we will build css and js file. so, let's run following two commands:
npm install
npm run build
Step 6: Use Bootstrap Class
Here, we will update welcome.blade.php file and use bootstrap class.
resources\view\welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style type="text/css">
i{
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<main class="container">
<h1> How to Install Bootstrap 5 in Laravel 10 - ItSolutionstuiff.com</h1>
<div class="card">
<div class="card-header">
Icons
</div>
<div class="card-body text-center">
<i class="bi bi-bag-heart-fill"></i>
<i class="bi bi-app"></i>
<i class="bi bi-arrow-right-square-fill"></i>
<i class="bi bi-bag-check-fill"></i>
<i class="bi bi-calendar-plus-fill"></i>
</div>
</div>
</main>
</div>
</body>
</html>
Run Laravel App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/
Output:
I hope it can help you...
