Martin Saxa

How to add Bootstrap 5 to Laravel project

Martin Saxa's photo
Martin Saxa
·

2 min read

Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. Underneath, it's built using sass. It comes with powerful prebuilt components. In this article, we will look into integrating it into the Laravel project.

Option 1 - CDN (the bad method)

The easy, but bad method is installing it using CDN. Simply copy the CDN link into the base blade template.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Larvel project</title>
    <!-- add line below -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- add line below -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

Now we have Bootstrap 5 in our project. However, we downloaded all the (neccesary) css. Also, we are not able to customize Sass at this point.

Option 2 - NPM package (the good method)

Now we just install Bootstrap and sass using npm in root of out project directory:

npm i -D bootstrap @popperjs/core sass

After that, we create a new foulder inside resources named scss with one file - app.scss.

// resources/scss/app.scss
@import "../../node_modules/bootstrap/scss/bootstrap";

There we only import scss files from node_modules. Later, we can modify values there or add custom classes.

After that, we need to import our app.scss into a js file, which Vite will bundle for us. Also, import Bootstrap JS files. Open, resources/js/app.js and add those two lines.

import './bootstrap'; // from laravel, just leave it here.

import '../scss/app.scss'; // out SCSS file
import * as bootstrap from 'bootstrap' // Bootstrap JS files

Now we can create a blade template for for our views. For example, it can by /resources/views/components/template.blade.php. We don't need to import scss file because it's already in our app.js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- use @vite() to import js files -->
    @vite('resources/js/app.js')
</head>
<body>
    {{ $slot }}
</body>
</html>

Now, we can normally create our views and extend them from our base file, e. g.:

<!-- resources/views/components/welcome.blade.js -->
<x-template>
    <h1>Hello, Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>
</x-template>

After that, we start npm and php server on localhost and then open browser.

# one terminal
npm run dev

# second terminal
php artisan serve

LaravelBootstrapPHPvitelaravel blade