Using Bootstrap 4 Instead of Tailwind Laravel 9/UI v3 Package
In this post, we will give you information about Using Bootstrap 4 Instead of Tailwind Laravel 9/UI v3 Package. Here we will give you detail about Using Bootstrap 4 Instead of Tailwind Laravel 9/UI v3 package and how to use it also give you a demo for it if it is necessary.
In this article, we’ll see how to install Bootstrap 4 with Laravel 9 using the laravel/ui v3 scaffolding package and also how to use Bootstrap for the pagination views instead of the default Tailwind CSS.
Laravel 9 Uses Jetstream and Tailwind by Default
Laravel 9 makes use of Jetstream by default for application scaffolding instead of the laravel/ui package.
Jetstream uses Tailwind instead of Bootstrap 4 for CSS styles and comes with two stacks – Livewire that uses Blade for templating and Inertia.js which uses Vue.js.
The Laravel team recommends developers to use Jetstream for new Laravel 9 projects but they have also updated the laravel/ui package to version 3 for using with Laravel 9, especially if you are updating your previous Laravel 7 app to the latest version.
For those of you using the old “laravel/ui” package with Laravel 9, we have moved Laravel 9.x support to the 3.x branch. Please update your composer.json files accordingly. Tweet
Also, check out Can we use laravel/ui in Laravel 9 as like in laravel 7
Installing Bootstrap 4 in Laravel 9 Project
Even if Laravel 9 comes with Tailwind by default, you can still use any CSS framework for styling your apps.
For Laravel8, we can either install Bootstrap 4 in the usual way i.e by including the files in your main Blade template or use the laravel/ui v3 package by installing it from Composer.
First, create a new Laravel 9 project using the following command:
$ composer create-project laravel/laravel --prefer-dist laravel8-bootstrapNext, navigate to your project’s folder and install the latest version of the laravel/ui package as follows:
$ cd laravel8-bootstrap$ composer require laravel/uiNext, install Bootstrap 4 in your Laravel 9 project using the following command:
$ php artisan ui bootstrapFinally, you need to install the bootstrap package and its dependencies from npm and compile the assets using the following commands:
$ npm install$ npm run dev DONE Compiled successfully in 22806ms 6:13:23 PM Asset Size Chunks Chunk Names/css/app.css 4.21 MiB /js/app [emitted] /js/app /js/app.js 1.33 MiB /js/app [emitted] /js/appUsing Bootstrap 4 in your Laravel 9 Blade Templates
After running the previous commands, you’ll compile the Sass files of Bootstrap 4 to a single CSS file in the public folder of your project. You can include the JS and CSS files in your Blade templates as follows:
<!doctype html><htmllang=""><head><metacharset="utf-8"><title></title><script src=""defer></script><linkhref=""rel="stylesheet"></head><body><h1>Laravel 9 with Bootstrap 4 Styles</h1></body></html>Customizing The Pagination View with Bootstrap 4
According to the official Laravel 9 docs:
By default, the views rendered to display the pagination links are compatible with the Tailwind CSS framework. However, if you are not using Tailwind, you are free to define your own views to render these links
Laravel includes pagination views built using Bootstrap CSS. To use these views instead of the default Tailwind views, you may call the paginator’s useBootstrap method within your AppServiceProvider:
useIlluminatePaginationPaginator;publicfunctionboot(){Paginator::useBootstrap();}Check out How to fix Laravel 9 UI paginate problem
Conclusion for Using Bootstrap 4 Instead of Tailwind Laravel 9/UI v3 Package
In this article, we’ve seen how to install Bootstrap 4 with Laravel 9 using the laravel/ui v3 scaffolding package and also how to use Bootstrap for the pagination views instead of Tailwind CSS.
Hope this code and post will help you for implement Using Bootstrap 4 Instead of Tailwind Laravel 9/UI v3 Package. if you need any help or any feedback give it in comment section or you have a good idea about this post you can give it the comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs