1.Installing Gem

Include the Twitter Bootstrap Rails gem in Gemfile to install it from RubyGems.org

group :assets do
  gem 'twitter-bootstrap-rails'

You can run bundle from command line

bundle install

install bootstrap

rails g bootstrap:install


rails g scaffold product name price:decimal --skip-stylesheets

2.generates Twitter Bootstrap compatible layout

you can use

rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]

or define it by yourself

<!DOCTYPE html>
    <title><%= Company.last.try :name %></title>
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <%= link_to "Home", root_path, :class => 'brand' %>
          <div class="nav-collapse">
            <ul class="nav">
              <li class='<%= 'active' if params[:controller] == 'home' %>'><%= link_to "首页", root_path %></li>
              <li class='<%= 'active' if params[:controller] == 'products' %>'><%= link_to "产品介绍", products_path %></li>
            <ul class='nav pull-right'>
              <% if user_signed_in? -%>
                <li class='dropdown'>
                  <a class="dropdown-toggle" data-toggle="dropdown">
                    <%= current_user.name %>
                    <b class='caret'></b>
                  <ul class='dropdown-menu'>
                    <li><%= link_to "个人资料", :controller => "my", :action => "information" %></li>
                    <li><%= link_to "编辑个人资料", :controller => "my", :action => "edit" %></li>
                    <li><%= link_to '修改密码', :controller => "my", :action => "password" %></li>
                    <li><%= link_to "退出", destroy_user_session_path, :method => :delete %></li>
              <% else -%>
                <li><%= link_to "登录", new_user_session_path %></li>
              <% end -%>
    <div class="container">
      <%= render 'layouts/messages' %>
      <%= yield %>
      <p>&copy;2012 <a href="http://xxxxx.com" target="_blank" >xxxxxxxxx</a></p>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
      <a class="close" data-dismiss="alert">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
  <% end %>
<% end %>

3.Themed (generates Twitter Bootstrap compatible scaffold views.)

rails g bootstrap:themed products -f

4.Add validation’s alert

gem 'simple_form'
bundle install
rails g simple_form:install --bootstrap
<div class="control-group">
  <%= f.label :name, :class => 'control-label' %>
  <div class="controls">
    <%= f.text_field :name, :class => 'text_field' %>


<%= f.input :name %>

5.Use Twitter Bootstrap kaminari


6.Using Less with Bootstrap


for example add in the bootstrap_and_overrides.css.less

@navbarBackground:                #555;
@navbarBackgroundHighlight:       #888;
@navbarText:                      #eee;
@navbarLinkColor:                 #eee;


  • https://github.com/twitter/bootstrap
  • https://github.com/seyhunak/twitter-bootstrap-rails