Setting up Bootstrap via Bower in Rails Application

Bower is essentially a package management system that makes it easy to install things such as Bootstrap, Devise, etc. This makes it very easy to manage any third-party library you may install via bower. This blog post assumes you already have your Rails files set up.

If you have never used bower before the first thing you need to do is install bower globally, which you can do in your terminal by typing this:

$ npm install -g bower

Next, you need to create a file in your main directory called .bowerrc

Inside of this file you need to establish the directory, which is where all of your bower dependencies will go:

// .bowerrc file
{
 “directory”:”vendor/assets/bower_components”
}

Whenever you install something via bower, all of the files will be inside of “vendor/assets/bower_components”

Now let’s install bootstrap:

Inside of your terminal we can install bower by typing the following:

$ bower install bootstrap

Now you should see the bootstrap files located here: “vendor/assets/bower_components/bootstrap”

The next thing we need to do is require the bootstrap css files inside of our application.css file:

// application.css file

/*
 *= require bootstrap/dist/css/bootstrap
 *= require_tree .
 *= require_self
 */

Lastly, we need to require bootstrap’s jQuery files inside of our application.js file:

// application.js file

//= require bootstrap/dist/js/bootstrap
//= require_tree .

That’s it! Now you can use Bootstrap inside of your application.