Free Themes for Twitter Bootstrap using Bootswatch


To learn how to change the theme using Bootswatch


We will continue working on the Striped project to learn how to use Bootswatch.


Step 1

Add this line to your application's Gemfile:

gem 'bootswatch-rails'

Step 2



Step 3

Change application.css.scss:

// First import cerulean variables
@import "bootswatch/cerulean/variables";
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
// Bootstrap body padding for fixed navbar
body { padding-top: 60px; }

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";

Problem: If you get the error Sass::SyntaxError: File to import not found or unreadable: bootswatch/cerulean/variables. The fix : Do not add the bootswatch-rails to assets group. It is not part of any group. If you still have the same problem, restart the server.

Step 4

Let's make the form pretty. Let's copy the html for cerulean theme and change our registration form in app/views/devise/registrations/new.html.erb as follows:

<%= devise_error_messages! %>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: 'form-horizontal' }) do |f| %>

  <div class="form-group">
    <%= f.label :email, class: 'col-lg-2 control-label' %>
    <div class="col-lg-4">
      <%= f.email_field :email, autofocus: true, size: 10, class: "form-control" %>

  <div class="form-group">
    <%= f.label :password, class: 'col-lg-2 control-label' %>
    <div class="col-lg-4">
      <%= f.password_field :password, autocomplete: "off", size: 25, class: "form-control" %> <em>(8 characters minimum)</em>

  <div class="form-group">
    <div class="col-lg-10 col-lg-offset-2">
      <%= f.submit "Sign Up", class: 'btn btn-primary' %>   

<% end %>

You can read the Bootstrap CSS docs for more details on the classes I have customized from the cerulean theme.

Step 5

To change the theme replace the 'cerulean' with the new theme name in application.css.scss file. For example, to use spacelab theme:

// First import spacelab variables
@import "bootswatch/spacelab/variables";
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
// And finally bootswatch style itself
@import "bootswatch/spacelab/bootswatch";

Reload the browser to see the new theme. You can download the entire source code for this article using the commit hash 5a874cf from


In this article, we customized the theme of our site using Bootswatch themes. It is easy to switch to a new theme by importing the desired theme in application stylesheet file.


Bootswatches converted to SCSS ready to use in Rails asset pipeline.
Bootswatche Spacelab Theme

Related Articles

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.