Adding Twitter Bootstrap to Your Laravel 5 App

by Colin DeCarlo on August 5, 2015

When I’m starting a new project there are a lot of things I need to think about; too many things really and it’s because of this that I rely so heavily on open source projects. Like many developers, I don’t want to spend time writing the 80% of the mandatory code that every app needs to make my special 20% shine. That’s why I’m pretty excited that now, starting in Laravel 5.1.3, adding Twitter Bootstrap to my application got so simple it’s almost embarrassing that I’ve committed bootstrap.min.css to my project repo in the past.

Let’s start a new app using the laravel command that we can then add Bootstrap to.

$ laravel new bootstrapped-project

Now that we’ve got our new app, we need to bring in all our dependencies.1.

    $ cd bootstrapped-project
    $ composer update
    $ npm install

Running npm install adds two packages to our application, laravel-elixir and bootstrap-sass; both of which we’re going to need to make this magic happen.

Next we need to uncomment the commented @import on line 1 of resources/assets/sass/app.scss. Since this is the only line in the file at this time and I have to do this on the command line, I’m going to use sed2 to accomplish this (You can do this in any of the infinite number of more reasonable ways).

$ sed -i '' -e 's/\/\/ //' resources/assets/sass/app.scss

Now, if we were to run gulp we would end up with an app.css file in public/css which contains all the css rules for Twitter Bootstrap. This is pretty great since all we’ve really done so far is remove 3 characters from one line in one file, but Bootstrap also requires some fonts and JavaScript to provide its full effect. Bootstrap’s fonts and js do ship with the bootstrap-sass package so we got them in when we ran npm install, all we have to do is copy them into our public directory. To do this we’ve to edit the gulpfile.js file so instead of the elixir command looking like this:

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

it looks like this:

elixir(function(mix) {
  var bootstrapPath = 'node_modules/bootstrap-sass/assets';
  mix.sass('app.scss')
    .copy(bootstrapPath + '/fonts', 'public/fonts')
    .copy(bootstrapPath + '/javascripts/bootstrap.min.js', 'public/js');
});

Now when we run gulp we get everything:

$ gulp
$ tree public
public/
├── css
│   ├── app.css 
│   └── app.css.map 
├── favicon.ico 
├── fonts 
│   └── bootstrap 
│       ├── glyphicons-halflings-regular.eot
│       ├── glyphicons-halflings-regular.svg 
│       ├── glyphicons-halflings-regular.ttf 
│       ├── glyphicons-halflings-regular.woff 
│       └── glyphicons-halflings-regular.woff2 
├── index.php 
├── js 
│   └── bootstrap.min.js 
└── robots.txt

4 directories, 11 files

And that’s it. We’ve edited 2 files and now we’ve got a Bootstrap’d Laravel app just waiting to make all our dreams a reality. Pretty simple.

P.S. one important note to make is that Bootstrap’s JS absolutely requires jQuery, so you need to add it to your project as well. Luckily, you can do that using either of the package managers we’ve already used to grab our dependencies or you can use Bower or you can use jQuery’s CDN or you can download it or …

1 This of course requires multiple package managers because deep down we’re all terrible people and not allowed to have nice things

2 I’m doing this work on a Mac which ships with BSD sed and not GNU sed. If you’re copying this verbatim and not using a Mac, you’re going to need to drop the empty string backup extension I used in the command.

The following two tabs change content below.
LAMP developer, the web app kind not the fra-ghe-ley kind from Italy. Hobbyist cook and photographer. I don't discriminate when it comes to hacking.

Latest posts by Colin DeCarlo (see all)