Using Bootstrap 4 with Laravel

Posted: October 14, 2017 15:05 | By: serge

Bootstrap 4 is way overdue...

The beta is out so I use in in my new projects now... To replace bootstrap 3 in a new installation of laravel (5.5 as of this writing) simply do the following:

Crate a new Laravel app... then, befor you run npm/yarn install... 

In package.json, you need to replace "bootstrap-sass": "^3.3.7", with "bootstrap": "4.0.0-beta". Your package.json devDependencies will now look like this:

{
    
    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap": "4.0.0-beta",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.1.10"
    }
}

 

We then need to fix our resources/assets/sass/app.scss file. Change the import to point to the right scss file


// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

 

Then fix any px value we have in the _variab‚Äčles.scss file to rem. Note that 14px is .875rem ... 

 

Now in resources/assets/js/bootstrap.js, replace require('bootsrap-sass'); with require('bootstrap');

 

That is it! Now you can run

npm install

then

npm run dev

and it should compile just fine. 

Note that pagination styles are a different with BS4 so you will have to addapt the out of the box Laravel pagination if you use it... 

 

 


Welcome


Hi, my name is Serge Lachapelle, a nerdy entrepreneur from Montreal, Canada. I love tech, startups, business and freedom in general. I share my experiences here as I re-invent the way I work. Let's connect and create something cool...

Subscribe to new posts



Categories

Laravel 3

LIfe 1

Programming 4

Startup 1

Technology 1

VueJS 1

Recent Posts

Resources

Laravel the source of all the awsomeness...

Laracast well worth the money, great training...

VueJS simple and logical javascript framework...

About

This is my personal blog. I decided to share my journey as I re-invent the way I work. I figured that other older programmers and entrepreneurs would share this quest to return to understanding the mechanics in order to reboot our creativity. I would be delighted if you followed my ramblings on Twitter or connect on LinkedIn...

Social Links

Location

I live in,
Montreal, Quebec
Canada.