Using Twitter Bootstrap with Rails 3.1 and SASS

Twitter’s Bootstrap is a pretty awesome toolkit to kickstart your next web app. But it uses Less. And that’s unfortunate for the Rails community as Sass (SCSS) is pretty much defacto now.

So what should we do if we want to use Bootstrap in a Rails 3.1 project, and make it co-exist with Sass?

Here’s how I do it.

1) Add Less to your Gemfile.

2) Submodule Bootstrap into your assets/stylesheets folder.

3) Create a bootstrap.less in assets/stylesheets to import the Bootstrap stylesheets you need.

4) Add that bootstrap.less to your application.css.

As for Sass files, I keep my main SCSS file (where I do all my @imports) in sass_main.scss, and add it to my application.css as well.

I’ve laid out the steps above in a gist.

This way of handling Bootstrap works a lot better than ports like sass-twitter-bootstrap and twitter-bootstrap-rails, and the less.js method:

Update (Jan 22 2012): Bootstrap is consistently changing, so I’ve genericized the steps to illustrate the concept. Should you require the full Bootstrap suite beyond the stylesheets, you could still maintain the repo as a submodule, and use symlinks to point to the relavant folders within Bootstrap.


Now read this


I wrote this shortly after Sir Alex announced his retirement a year ago, but I never did hit publish. In light of today’s news about David Moyes, this piece feels especially apt. Just like that Sir Alex Ferguson has retired. And a... Continue →