Bootstrap in action, as demoed in Luca Pette’s article

Updated Feb 2012 for Bootstrap 2.

Twitter’s new CSS toolkit, Bootstrap, is all the rage these days. I explain how to get the CSS, and optionally the mixins and the JavaScript, into your Rails app.

“How do I serve Bootstrap through Rails 3.1’s asset pipeline?”

Just add Ken Collins’s (@metaskill’s) less-rails-bootstrap gem (announced recently on his blog) to your Gemfile:

1
gem 'less-rails-bootstrap'

Require it in your app/assets/stylesheets/application.css:

1
 *= require twitter/bootstrap

Done. You now have Bootstrap 2 working in your Rails app. :-)

By the way: Did you know that Bootstrap is written in LESS, a stylesheet language like SCSS?

“Ugh, I hate LESS. Can I get Bootstrap as plain CSS please?”

That’s OK, not everybody likes LESS. Behind the scenes, less-rails-bootstrap
transparently compiles the Bootstrap LESS files into CSS through Rails’s asset
pipeline (using the less-rails gem). This means
that there is no scary client-side compilation with less.js (like the LESS
website advertises). And on the Rails side, you can just carry on using SCSS.
In other words, Bootstrap by default acts like any regular CSS library – all
the LESS stuff is hidden from you.

“I love LESS. Can I use the Bootstrap mixins in my LESS code?”

Sure you can. Just import the mixins and variables in any stylesheet file
ending in .less (like posts.css.less):

1
2
3
4
5
6
7
@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";

div.post {
   color: @yellow;  // <-- using variables
   #gradient.vertical(@black, @blue);  // <-- using mixins
}

Warning: Do not get confused about requiring vs importing:

  • Use = require twitter/bootstrap at least once (typically in
    application.css) to get all the CSS rules that come with Bootstrap. The files
    will be processed through Sprockets (Rails’s asset handler), which guards
    against duplicate inclusion. If you tried to require the mixins or
    variables, it would have no effect, since Sprockets compiles them separately
    from your stylesheets.

  • Add the two @import lines above to every LESS file in which
    you want to use Bootstrap mixins or variables. As you can verify by
    inspecting the CSS output, importing them has no effect (i.e. no CSS rules
    are generated) until you actually use the mixins and variables in your own
    CSS rules. If you tried to @import the entire “twitter/bootstrap”
    library, it would show up multiple times in your compiled CSS assets, because
    Sprockets can’t guard against duplicate inclusion when you use
    @import.

To summarize, require the entire toolkit, and @import the
mixins and variables.

“Can I use Bootstrap’s JavaScript plugins?”

Easy enough. Add this to your application.js:

1
//= require twitter/bootstrap

The plugins load through jQuery’s .ready, so be sure to wrap your
own code as well:

1
2
3
$(function() {
  // ...
});

“Now how do I get started using Bootstrap in my layouts and views?”

Try adding a button in any view file – it should be rendered pretty:

1
<input type="button" value="Click me" class="btn primary">

Or try adding a black
navigation bar
to your layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="/">Whizboo App</a>
      <ul class="nav">
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
      <ul class="nav pull-right">
        <li><a href="/sign_in">Sign In</a></li>
      </ul>
    </div>
  </div>
</div>

Fore more inspiration, check out Luca’s article about
using Bootstrap with Rails
.

“I want more explanation. / I heard there is a Sass version of Bootstrap.”

Check out ”Twitter
Bootstrap, Less, and Sass: Understanding Your Options for Rails 3.1
” on
RubySource!

Read more at the source