1. LARAVEL 8 - Introduction
Since version 8 Laravel uses Tailwind CSS as its main CSS framework. Allthough being a first class CSS framework, developing using Tailwind CSS requires a lot of work because you’ll have to develop every reusable component from scratch yourself.
In the past a lot of developers, like myself, used Bootstrap. Laravel has dropped Bootstrap support since version 8. The easiest way to keep using Bootstrap in Laravel 8 is by creating a new Laravel project and then using the two commands :
composer require laravel/ui
php artisan ui bootstrap --authThis installs the previous version Bootstrap 4.6.x and adds some scaffolding in case you use the – – auth option.
For those of us who want to keep using Bootstrap, there’s a simple way to create a new Laravel project using the latest Bootstrap 5 framework.
Tip :
If you’re looking for an excellent Local Web Development Server to develop your PHP based applications in a Microsoft Windows environment, please read my posts regarding Laragon.
2. LARAVEL 8 - Create a new project
Start by creating a new Laravel project :
composer create-project laravel/laravel your-project-nameThen cd into the newly created project folder and install the Laravel UI package :
composer require laravel/uiThis legacy package is a very simple authentication scaffolding built on the Bootstrap 4 CSS framework.
Generate the Bootstrap scaffolding :
php artisan ui bootstrap --auth This installs Bootstap 4.6 and generates the files needed for authentification.
3. LARAVEL 8 - Install Bootstrap 5
Now let’s install Bootstrap 5 :
npm install bootstrap@latest bootstrap-icons @popperjs/core --save-dev
This updates Bootstrap 4.6.x to version 5.x and adds the Bootstrap Icons and popper.js version 2.
Do not remove popper.js version 1!
4. LARAVEL 8 - Configure .env
Now open your project in your favorite code editor. I use Visual Studio Code.
Check and addapt all settings, especially the database connection and the mail settings.
5. LARAVEL 8 - Import Bootstrap Icons
Inside your project, open the file resources\sass\app.scss and add :
@import '~bootstrap-icons/font/bootstrap-icons';
6. LARAVEL 8 - Replace the scaffolding files
Inside your project, replace the Bootstrap 4 scaffolding files by the ones you can download here.
So replace the content of your projects /resources/views/ folder by the folder in the downloaded ZIP archive.
7. LARAVEL 8 - Build the application
Now create the database tables :
php artisan migrateThen let’s finalize the setup :
npm install
npm run dev
If the npm run dev command throws errors concerning missing dependencies, just run the command a second time.
Normaly all should be OK now and you can start developing your own Laravel 8 Bootstrap 5 application.
