I’m developing a Markdown-based notes taking platform with Laravel, and I want it to use all the latest and greatest CSS framework: the Boostrap 4 Alpha. To get this set up, I had to learn how web applications and Laravel maintains dependancies and packages code. The default site that Laravel generates has some links on the default page, and if you add the built-in authentication with PHP Artisan, those pages are served with an older version of Bootstrap. So how do you change this?

First, you need to add Bootstrap 4 Alpha as a dependency in the NPM dependency file “package.json” like, as well as Laravel’s version of Gulp called “Elixir” and it’s version of “Webpack”, another JS tool, like so:

"laravel-elixir": "^3.0.0",
"bootstrap-v4-dev": "^4.0.0-alpha.6",
"laravel-elixir-webpack": "^1.0.1"

You should then run NPM’s install to get the latest files. Now, navigate to the SCSS file in your Resources/Assets/SASS directory from your root Laravel directory. In app.scss, remove any unneeded lines, and make it look like this:

@import "node_modules/bootstrap-v4-dev/scss/bootstrap.scss";

This imports the new version of Bootstrap instead of whatever version your project came with. When we run Gulp, this will compile the latest Bootstrap SCSS files for your Laravel application, but we’ll also need to update the JavaScript file. Navigation to the Bootstrap JS file in Resources/Assets/JS, and make replace any mention of the Bootstrap JS (probably “bootstrap-sass”) file with this line:

require('bootstrap-v4-dev');

With your dependancies installed and your assets pointing towards Bootrap 4, it’s time to set up Gulp so that you can compile these into your web application. Create a “gulpfile.js” in your root directory and add these lines:

var elixir = require('laravel-elixir');
var elixir = require('laravel-elixir');
require("laravel-elixir-webpack");

elixir(function(mix) {
   mix.sass('app.scss').webpack('app.js');
});

Now, when you run “gulp” in your root directory, you should find that your CSS and JavaScript have been updated to Bootstrap 4.