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?
