Home / Community
Home / Community

Bootstrap Themes with Bootswatch

D3177da7794ac3ce603d65b33bf4a981by Gonzalo Fernandez|

Jun 04, 2012


We all love how the "new" Twitter Bootstrap help us style our web apps so make our apps look good very easy :)

The downside is that, now a lot of (lazy) developers are using the "default" look provided by Twitter:


You can always manually customize all the variables provided by Bootstrap.

But I love to use the KISS principle, and therefore I will talk about Bootswatch

"Bootswatch is an open source collection of Bootstrap themes (aka swatches)"

Bootswatch gives you 2 options to use each swatch:

  • Using the Bootstrap modified version (they provide a normal and a minified version).
  • Using the LESS files with the modifications.

Because I'm using Twitter Bootstrap in the Asset Pipeline with the bootrstrap-sass gem, I want to avoid using any of these 2 options.

bootswatch-rails gem

Fortunately, there is a gem that will make our life easier:


In summary, all we have to do is add the gem to our Gemfile, and import the swatch that we want to use. That's all!

Adding the gem

Modify you Gemfile with:

gem 'bootstrap-sass'       # should be already included
gem 'bootswatch-rails'

After this, just run:


Using a swatch (theme)

In the bootswatch-rails README, they ask you to modify application.css to include the bootstrap and bootswatch. I don't like this approach.

Instead, let's create a file in an Asset Pipeline (like app/assets/stylesheets/):


// First import Bootswatch theme variables http://bit.ly/KIu8IN
@import 'bootswatch/slate/variables';

// Use Twitter Bootstrap
@import 'bootstrap';

// And finally Bootswatch style
@import "bootswatch/slate/bootswatch"

In this example, we are using the Slate swatch:


They already provide 11 swatches to choose from, so let's forget about ugly sites with the default Bootstrap theme!

More information:

blog comments powered byDisqus