Editing Ruby and Rails Configuration (section)

== Rails and Twitter Bootstrap ==

Bootstrap is written in LESS, but there is an official port to SASS that is maintained by the Bootstrap team. 

=== Integrating Bootstrap with Rails ===

Install the Ruby Gems for Boostrap

<syntaxhighlight lang="ruby">
# Gemfile

...

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

# NOTE: The sass-rails gem is included with new Rails applications by default.
#       Please make sure that it is not already in your Gemfile before uncommenting it.
# gem 'sass-rails'
</syntaxhighlight>

Autoprefixer (`autoprefixer-rails`) is optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.

To install the gems, run:

<syntaxhighlight lang="powershell">
> bundle install
</syntaxhighlight>

=== Import Bootstrap CSS assets ===

Rename `app/assets/stylesheets/application.css` to `app/assets/stylesheets/application.css.sass`.

Import the Bootstrap assets in the newly renamed `application.css.sass` file.

<syntaxhighlight lang="css">
// app/assets/stylesheets/application.css.sass

...

@import "bootstrap-sprockets"
@import "bootstrap"
</syntaxhighlight>

When you compile, imported assets render a compiled version of their contents where the `@import` statement was found.

=== Import Bootstrap JavaScript assets ===

Add directive to `app/assets/javascripts/application.js`.

<syntaxhighlight lang="javascript">
//= require bootstrap-sprockets
</syntaxhighlight>

This must come after 

<syntaxhighlight lang="javascript">
//= require jquery
</syntaxhighlight>

The file should look like this

<syntaxhighlight lang="javascript">
// app/assets/javascripts/application.js

...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
</syntaxhighlight>

It's important this this is the last thing to be required:

<syntaxhighlight lang="javascript">
//= require_tree .
</syntaxhighlight>

`//= require_tree .` complies each of the other JavaScript files in the javascripts directory and any subdirectories. 

* [http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1 Boostrap Tutorial on Rails, Installation]