how to use bootstrap 5 coreui template in laravel 9

In this section we will see how to use bootstrap 5 coreui dashboard template in laravel 9.


Tool Use

LaravelDaily/Larastarters

Laravel 9

Bootstrap 5 CoreUI Template


Step 1: Create Laravel Project

Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.

composer create-project laravel/laravel coreui-dashboard 


Step 2: Connect Database

Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password


Step 3: Install Larastarters

Install Larastarters via composer.

composer require laraveldaily/larastarters --dev


Run below command to choose the starter kit and the theme (options are listed below).

php artisan larastarters:install


Now Select laravel ui with Bootstrap (Select number 2).

 Which Laravel starter kit you want to use? [Laravel Breeze (Tailwind)]
 Laravel Breeze (Tailwind) ............................................................. 0  
 Laravel Breeze & Inertia (Tailwind) ..............................................1  
 Laravel UI (Bootstrap) .......................................................................2  
❯ 2


After selecting number 2, Next Select coreui admin design theme(1).

 Which design theme you want to use? [adminlte]
 adminlte .................................................... 0  
 coreui ...................................................... 1  
 plainadmin .................................................. 2  
 volt ........................................................ 3  
 sb-admin-2 .................................................. 4  
 tabler ...................................................... 5  
 1

update version of laravel Larastarters install automatic npm, you can skip step 4.


Step 4: Install npm and run vite

Install npm dependencies and run vite

npm install && npm run dev 

and also run in next terminal run laravel server

php artisan serve


Step 5: Test Bootstrap 5 CoreUI Dashboard in Laravel 9

Register user and check coreui theme

http://localhost:8000/register

laravel 9 integrate bootstrap 5 core ui

laravel 9 integrate bootstrap 5 core ui


resources/views/home.blade.php

@extends('layouts.app')

@section('content')
    <div class="card mb-4">
        <div class="card-header">
            {{ __('Dashboard') }}
        </div>
        <div class="card-body">
            {{ __('You are logged in!') }}
        </div>
    </div>
@endsection
laravel 9 bootstrap 5 coreui admin dashboard

laravel 9 bootstrap 5 coreui admin dashboard



Tags: