Slide 1
Excellent Education Program
Innovative Methods of Teaching

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.

Slide 2
Learning Through Play
Devoted to the Early Education

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Slide 2
Learning Through Play
Devoted to the Early Education

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Slide 2
Learning Through Play
Devoted to the Early Education

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Slide 2
Learning Through Play
Devoted to the Early Education

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Slide 3
Learning Through Play
Find a Class for your Children

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis.

previous arrow
next arrow

How to configure Laravel 5.5 with Bootstrap 4

Spread the Knowledge

Bootstrap 3 to bootstrap 4.3.1 upgrade in Laravel 5.5

Note: Laravel 5.5 uses bootstrap 3 by default
Steps involved in the upgrade
  1. Open gitbash in the home directory of the Laravel application and run the command given below:
    npm install bootstrap@4.3.1
  2. Change needed in resources\assets\sass\app.scss file:
    // Remove this line
    @import "~bootstrap-sass/assets/stylesheets/bootstrap";
    // Add this line
    @import "node_modules/bootstrap/scss/bootstrap";
  3. Change needed in file resources\assets\sass\_variables.scss
    // Remove this line from _variable.scss as “px” is not supported by bootstrap4.x.y
    $font-size-base: 14px;
    // Add this line. This will work for bootstrap4.x.y
    $font-size-base: 0.875rem;
  4. Change needed in file resources\assets\js\bootstrap.js
    // Remove this line
    require('bootstrap-sass');
    // Add this line for using bootstrap 4.3.1
    require('bootstrap');
  5. Open gitbash in you project directory then run
    // Run following command
    npm run dev

    Note: npm run dev compiles all the css and js files from resources\assets to public dir

How to check if bootstrap 4.3.1 was successfully compiled?

Open app.css from public/css and check the bootstrap version mentioned in the top comments section. It must show something as shown below

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


How to use bootstrap 4.3.1 in your html or blade files?

Import app.css from public/css directory in blade or html file (s) using below code

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


Do we need to do anything else?

If you have used any class that’s not supported by bootstrap 4 then you need to make changes accordingly by going through the official documentation of bootstrap 4


Possible Errors!

Solve it by running following commands!
npm install --save popper.js
npm run dev
Chetan