Bootstrap and Rails


Add this to your Gemfile:

Gemfile
gem 'bootstrap-sass'

Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss.

Remove these lines from the file:

app/assets/stylesheets/application.scss
 *= require_tree .
 *= require_self

Now add these lines:

app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";

You should try to keep the styles for each view in a file named after that model or controller. For example, in our blog application, we will put all styles related to the post views in a file called posts.scss. We need to import this file into the application.scss file with a line like this:

app/assets/stylesheets/application.scss
@import "posts";

To make elements like drop-down menus work, we'll also need to add bootstrap's JavaScript files. In app/assets/javascripts/application.js, add this line to the bottom:

app/assets/javascripts/application.js
//= require bootstrap-sprockets

Make sure that you are requiring jquery as well. You should also have this line in your application.js.

app/assets/javascripts/application.js
//= require jquery

If it's not there, add it above the require bootstrap-sprockets line.


We put together some guides for participants in our workshops. Feel free to use them. If you see any errors, please submit an issue on our github repository.