What's the best way to install bootstrap with a Rails app?

Why install the bootstrap gem?

Since Rails uses the asset pipeline to use the sass version of bootstrap to minimize and condense stylesheets, javascript and images are the preferred way to include bootstrap in app layout views rather than just bootstrap. Also, if you only include bootstrap in a header file, that included file must be a compiled version of bootstrap (it's just a CSS file). However, since we will be including a sass version of bootstrap in your app, you can access bootstrap's sass variables, mixins, and other sass related functionality. You can't get that functionality by including compiled assets in the app layout view. By importing sass into the application.scss file, Rails can compile your bootstrap and assets on the fly and give you more flexibility in designing your application.

Add Bootstrap to Rails app

According to the bootstrap-sass gem , you need to add

'gem 'bootstrap-sass'

to your Gemfile, then run

bundle install

Next, you will want to import the bootstrap stylesheets in your application css manifest file. However, by default the manifest file is named:

app/assets/stylesheets/application.css

But you should rename it to use the .scss extension (or .sass extension) like this:

app/assets/stylesheets/application.scss

Now, delete everything in the application.scss file and add the following two lines:

@import "bootstrap-sprockets";
@import "bootstrap";

From now on you will need to handle the import of scss files manually.

Next, to make bootstrap's javascript helper available, you need to add the following line:

//= require bootstrap-sprockets

for you

app/assets/javascripts/application.js

You need to add this line so your application.js file looks like this:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,   lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .