Using Bootstrap with Ruby on Rails

Getting started

This short tutorial will get you up, solved, and running with Bootstrap in your Rails app in 5 steps.

1. First, create your Rails app.

rails new demo-app


2. Include the bootstrap-sass gem by inserting this line into your Gemfile.

gem 'bootstrap-sass',


3. Run the bundle install command. You now have bootstrap-sass installed for your demo-app.

We are now going to edit application.js and application.css.scss at the locations below. If you don't have any of these files, simply create it. Example: touch application.css.scss

app/assets/
|-- images
|-- javascripts
|   |-- application.js
|   `-- tooltip.js
`-- stylesheets
    |-- application.css.scss
    `-- main.css.scss

4. In application.js, insert these lines:

//= require jquery
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .


5. In application.css.scss, insert these lines:

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

( Note: We have @import "main"; because there is a main.css.scss file in the stylesheets folder. Otherwise don't include it. )


And you're done!

So now you can test that your app has Twitter Bootstrap properly installed by copying any of the Bootstrap components and pasting it into your index.html.erb file and firing your web server.

I particularly like Bootstrap's Modals because it works "properly". Once it pops up you can either click outside the Modal or hit the Esc button on the keyboard to close it. Improper or poorly designed modals won't close until you hit exactly on the modal's "close" button. Don't we all hate UI elements that force the user to follow its rules?