1. Install the Bootstrap-Sass Gem
Sass is a default for CSS development in Rails so I recommend installing Thomas McDonald’s bootstrap-sass gem.
add bootstrap-sass
in the Gemfile
1 | gem 'bootstrap-sass' |
and run $ bundle install
2. Include the Twitter Bootstrap Javascript
Include the twitter bootstrap javascript files by modifying the file app/assets/javascripts/application.js
1 | //= require jquery |
3. Import the Twitter Bootstrap CSS
adding a new file app/assets/stylesheets/bootstrap_and_overrides.css.scss file
1 | @import "bootstrap"; |
4. Default Application Layout with Twitter Bootstrap
Twitter Bootstrap provides additional elements for a more complex page layout.
Replace the contents of the file app/views/layouts/application.html.erb with this:
ERB version: https://gist.github.com/xuncheng/5998747
HAML version: https://gist.github.com/xuncheng/5998755
5. Flash Messages with Twitter Bootstrap
For CSS styling with twitter bootstrap, create a partial for flash messages in app/views/layouts/_messages.html.erb like this:
ERB version: https://gist.github.com/xuncheng/5998767
HAML version: https://gist.github.com/xuncheng/5998779