Setup Bootstrap Sass with Laravel Elixir

Published on by

Setup Bootstrap Sass with Laravel Elixir image

Laravel Elixir is a fantastic package that simplifies working with Gulp. For the unfamiliar Gulp is a JavaScript task runner that allows you to automate tasks. It can be used for compiling CSS, concating and minifying JavaScript, and much more.

Gulp was designed to be faster than previous build tools by utilizing node streams and has become one of the go to build systems. Laravel Elixir is a wrapper around Gulp making the setup a breeze.

In this tutorial let’s take a look at how to setup Bootstrap Sass with Elixir in a default Laravel 5.1 install.

Installing NPM Dependencies

Both Bootstrap and Elixir are node packages that are available via NPM, node package manager. If you open up the default package.json file you will see a list of dependencies:

"dependencies": {
"laravel-elixir": "^3.0.0",
"bootstrap-sass": "^3.0.0"
}

From terminal, run npm install and both these packages will be installed as well as any of their dependencies. If you are familiar with composer for PHP then it’s almost identical.

After the command finishes running, you can look in the node_modules folder and see a list of all the packages.

Bootstrap Sass

Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and uncomment this line:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Save it and run gulp, then you have all the Bootstrap styles ready for you to use. That’s literally all that is required.

Customizing Bootstrap Styles

If you are not happy with the default Bootstrap design you can easily customize it by overriding its variables. As an example let’s change the default font to Lato from Google Fonts.

Open resources/assets/sass/app.scss again and we can import the font and adjust the variable. Here is the whole file with these changes:

@import url(https://fonts.googleapis.com/css?family=Lato);
$font-family-sans-serif: 'Lato', sans-serif;
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

How this works is first we import the Lato font from Google. Next, we override Bootstrap’s existing variable for font-family. This works because Bootstrap uses the Saas !default. Here is how they describe it:

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

To find a list of all the variables you can customize open:

node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

Including Bootstrap JavaScript with Browserify

For including the Bootstrap JavaScript we have a few options. We could use their CDN, download it manually, or use a system called Browserify.

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies.

Because we already have Bootstrap installed through NPM we can utilize browserify and pull these into our app.js file. First, we do need to install jQuery and let’s do it through NPM by running the following command:

npm install jquery --save

Now, create the following file: resources/assets/js/app.js and add the following code:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
 
$( document ).ready(function() {
console.log($.fn.tooltip.Constructor.VERSION);
});

Bootstrap expects jQuery to be global and with the first line we are including jQuery and assigning it to the window. The second line is requiring Bootstrap JavaScript. The last section is just a jQuery on ready and logging out the bootstrap tooltip version. This is used to just confirm it’s loading as we expect.

Now, lets modify the gulpfile.js in the project root:

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

The simplicity of this shows just how great Elixir is. By just adding .browserify('app.js') everything is handled automatically. After saving run gulp again and this will be compiled into public/js/app.js

If you include this in your layout and load the site in a browser you should see 3.3.5 showing in the console.

Going further

This tutorial just barely touches the surface on everything Elixir can do. Check the official docs for more information and be sure and check out the Laravel Elixir category for more tutorials and resources.

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Tinkerwell

Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
Generate Code Coverage in Laravel With PCOV image

Generate Code Coverage in Laravel With PCOV

Read article
Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1 image

Non-backed Enums in Database Queries and a withSchedule() bootstrap method in Laravel 11.1

Read article
Laravel Pint --bail Flag image

Laravel Pint --bail Flag

Read article
Laravel Herd for Windows is now released! image

Laravel Herd for Windows is now released!

Read article
The Laravel Worldwide Meetup is Today image

The Laravel Worldwide Meetup is Today

Read article
Cache Routes with Cloudflare in Laravel image

Cache Routes with Cloudflare in Laravel

Read article