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.


Eloquently is a recruiting firm. We also host workshops that teach web development and career skills. If you are looking for a job or are interested in joining our web development workshops, please contact us!

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.

These guides are a work in progress. If you see any errors or have a suggestion for a better way to do something, please let us know.