Adding Bootstrap 4 from scratch to Laravel 8

Submitted by admin on Sun, 01/31/2021 - 16:07

 

Install a new Laravel project 

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

The "." and the end tells composer to install your Laravel project in the current directory.

For this tutorial, it may help you to become familiar with two files, package.json and webpack.mix.js

 

Adding Bootstrap 4

 

npm install --save-dev bootstrap@4
npm install --save-dev jquery@1.9
npm install --save-dev popper.js@1.16

We also need to add packages to import and compile Bootstrap's Sass files.

npm install --save-dev sass
npm install --save-dev sass-loader

 

Your package.json should look very similar to this now.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.6.0",
        "jquery": "^1.9.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.16.1",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.5",
        "sass-loader": "^10.1.1"
    }
}

Now compile all your javascript and css by running the following command:

npm run dev

Next we need to add the Bootstrap packages stylesheets in a way your Laravel project can use them.

Adding Bootstrap stylesheets to Laravel Mix

Create an directory called "sass" inside your resources folder, resources/sass and  add a file, app.scss.

Edit resources/sass/app.scss to include the following.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');


// Bootstrap
@import '~bootstrap/scss/bootstrap';

Tell Laravel Mix to add and compile your app.scss file by editing mix.webpack.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css');

Laravel Mix will compile everything listed above into one js file and one css file in the public directory.

Laravel uses Laravel Mix -- a wrapper around Webpack. Webpack compiles everything down to a single file (/js/app.js), or multiple files. 

Recompile your javscript and css

npm run dev

php artisan serve

Adding Bootstrap HTML to your Laravel Blade files.

The default install of your Laravel project will build map your applications home page to  welcome.blade.php  in  your views folder, resources/views/welcome.blade.php.

Replace the contents of welcome.blade.php with the following:

 

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Add Bootstrap 4 to Laravel 8</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>

<body>

    <main role="main" class="container">

        <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text
                and a mostly barebones HTML document.</p>
        </div>

    </main><!-- /.container -->

    <script src="{{ mix('js/app.js') }}" type="text/js"></script>
</body>

</html>

Laravel Mix compiles the scss file to css in the public folder. The CSS stylesheet is called with the following Blade snippet.

<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />

Adding custom CSS 

You will most likely want to add your own styles or overwrite some of Bootstrap's default styles.

You can add your own custom CSS to your Laravel project. For example:

 

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

 

You can either 

  1. Adding your new CSS styles to resources/css/app.css
  2. Create a new file in resources/saas called _custom.scss, and import it into resources/sass/app.scss

In _custom.scss add

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

Edit app.scss and add

 

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');


// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Custom
@import "custom";