1. LARAVEL 9 - 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 --auth
This 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 9 - Build the application manually from scratch
a. Create a new Laravel project
Start by creating a new Laravel project :
composer create-project laravel/laravel your-project-name
Then cd into the newly created project folder and install the Laravel UI package :
composer require laravel/ui
This 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.
b. 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!
c. Configure the .env file
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.
e. 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.
f. Finalize the application
Now create the database tables :
php artisan migrate
Then let’s finalize the setup :
npm install
npm run dev
Tip :
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.
2. LARAVEL 9 - Build the application by cloning the GitHub repository
a. Clone the GitHub repository
Inside the root folder of your local web development environment, open a new terminal window.
Enter the command :
git clone https://github.com/MGeurts/laravel-9-bootstrap-5.git
Change directory into the newly created project folder.
b. Install Composer Dependencies
Enter the command :
composer install
c. Install NPM Dependencies
Enter the commands :
npm install
npm run dev
d. Create your copy of the .env file
Enter the command :
cp .env.example .env
e. Generate an App Encryption Key
php artisan key:generate
f. Create an empty database for our application
Use your favorite database management tool to create an empty database.
Configure a username and password.
g. Configure the .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=********
Adjust the DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME and DB_PASSWORD options to match your situation.
Also adjust the mail settings:
MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"
Adjust the MAIL_HOST, MAIL_PORT, MAIL_USERNAME, MAIL_PASSWORD, MAIL_ENCRYPTION and MAIL_FROM_ADDRESS options to match your situation. h. Migrate the database
php artisan migrate
3. LARAVEL 9 - Extend the application with DataTables
If your application has to manage a lot of records, please visit my post about integrating DataTables.
It worked nicely for me ! Thanks !
Good, helpful for me, tks.