Menu
LARAVEL

laravel Integration with Bootstrap

Integrating Bootstrap with Laravel is a common practice for building stylish and responsive web applications. Laravel is a PHP framework that offers a robust set of features for web development, while Bootstrap provides a powerful CSS framework for creating modern and responsive designs.

Here's how you can integrate Bootstrap with Laravel:

Install Laravel: If you haven't already installed Laravel, you can do so using Composer, a PHP dependency manager. Run the following command in your terminal:

composer create-project --prefer-dist laravel/laravel project-name

Replace project-name with the desired name of your Laravel project.

 

1. Using CDN:

 

step 1. Create/Update Layout File:


Open the layout file located at resources/views/layouts/app.blade.php and add the Bootstrap CSS link:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="antialiased">
    <div class="container">
        @yield('content')
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

 

step 2. Create a Blade View: 

Let's create a simple Blade view to demonstrate Bootstrap integration. Create a new file named welcome.blade.php in the resources/views directory with the following content:

@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card mt-5">
                <div class="card-header">
                    <h5 class="card-title">Welcome to Bootstrap Laravel</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">This is a simple example of integrating Bootstrap with Laravel.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </div>
@endsection

 

step 3. Route Setup: 

Update the routes/web.php file to route the home page to our welcome.blade.php view:

use Illuminate\Support\Facades\Route;
Route::get('/', function () {
    return view('welcome');
});

 

2. Using NPM/YARN:

Here's a guide on how to integrate Bootstrap with Laravel using npm

 

step 1. Install Laravel UI Package :

 navigate to your Laravel project directory and run:

composer require laravel/ui

 

step 2.  Install Bootstrap: 

php artisan ui bootstrap

If you want to install ui auth system then install bootstrap --auth

php artisan ui bootstrap --auth

 

step 3.  Install NPM:

npm install

 

step 4. Run Build :

npm run build

 

step 5.  Add/Include Compiled scss/js in Your Layout: 

In your Blade layout file (usually located in resources/views/layouts/app.blade.php), include the compiled CSS and JavaScript files:

 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>{{ config('app.name', 'Laravel') }}</title>

     <!-- Styles -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
 </head>
 <body>
     <div class="container">
         @yield('content')
     </div>
 </body>
 </html>

 

step 6. Create a Blade View: 

Let's create a simple Blade view to demonstrate Bootstrap integration. Create a new file named welcome.blade.php in the resources/views directory with the following content:

@extends('layouts.app')
@section('content')
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="card mt-5">
                <div class="card-header">
                    <h5 class="card-title">Welcome to Bootstrap Laravel</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">This is a simple example of integrating Bootstrap with Laravel.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </div>
@endsection

 

step 7. Route Setup: 

Update the routes/web.php file to route the home page to our welcome.blade.php view:

use Illuminate\Support\Facades\Route;
Route::get('/', function () {
    return view('welcome');
});
LARAVEL