In this tutorial you will learn about the Laravel 8 Install Bootstrap Example Tutorial and its application with practical example.
In this Laravel 8 Install Bootstrap Example Tutorial I will show you how to install bootstrap 4 in laravel 8. I will also show you how to install bootstrap auth scaffolding in laravel. In this tutorial you will learn to integrate bootstrap 4 and auth scaffolding in laravel 8. In this article I will share example to install and use bootstrap 4 in laravel.
Laravel 8 Install Bootstrap Example Tutorial
In this step by step laravel 8 install bootstrap 4 tutorial. I will demonstrate you to install bootstrap 4 in laravel 8. Please follow the instruction given below:
Install Laravel/UI
Now, switch the laravel project directory and run the following composer command to install laravel/ui package. Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts.
Run the following composer command to install Laravel/UI.
|
1 |
composer require laravel/ui |
Install Bootstrap 4 In laravel 8
Run following artisan command to install Bootstrap in your Laravel project.
|
1 |
php artisan ui bootstrap |
Install Bootstrap Auth Scaffolding
Use the following artisan command to Install the auth scaffoldings with Bootstrap.
|
1 |
php artisan ui bootstrap --auth |
Now, you have successfully installed bootstrap in your laravel 8 project, you can see your resource directory js folder.
Install Bootstrap Packages
Now, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:
|
1 |
npm install |
Run NPM
Now, run the below command for asset compilation.
|
1 |
npm run dev |
The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.
How to use Bootstrap in Laravel Blade Template
Now, you can use the bootstrap js and CSS in laravel blade template as following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html> <head> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <h1>This is example.</h1> </body> </html> |
