How to use Bootstrap Icons in Laravel Vite?

By Hardik Savani November 5, 2023 Category : Laravel

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

Read Also: How to Send Email with Attachment in Laravel?

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:

Read Also: How to Install Sweetalert2 in Laravel 10 Vite?
http://localhost:8000/

Output:

I hope it can help you...

Tags :
Previous

How to Install Sweetalert2 in Laravel 10 Vite?
Next

How to Generate a Dropdown List of Timezone in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares