Adding Twitter's Bootstrap CSS to your Rails app

Bootstrap demo — 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:

gem 'less-rails-bootstrap'

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

 *= 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):

@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:

//= require twitter/bootstrap

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

$(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:

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

Or try adding a black navigation bar to your layout:

<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">Sing In</a></li>
      </ul>
    </div>
  </div>
</div>