Bootstrap Twitter in Rails

Hi…to all to day i learned Bootstrap from Twitter in rails application…

Before getting into session first ,let we  know about twitterbootstrap..It helps to build beautiful web applications..It provides variety of CSS and Javascripts for  making layouts,navigations.lot more etc..

Now, we ll create a simple application to store the products and price in a shop and then add TwitterBootstrap..

we ll call the app as store and create scaffold named Product model to do some work

$ rails new store

$ cd store

$ rails g scaffold product name:string price:decimal –skip-stylesheets

$ rake db:migrate

Note: we skipped stylesheets because we are going to use Bootstrap’s stylesheets,css,etc..

now you can see the page as like this..

now.we have to add Bootstrap to this application..

open Gem file

  1. # Gems used only for assets and not required  
  2. # in production environments by default.  
  3. group :assets do  
  4.   gem ‘sass-rails’,   ‘~> 3.2.3’  
  5.   gem ‘coffee-rails’, ‘~> 3.2.1’  
  7.   # See for more supported runtimes  
  8.   # gem ‘therubyracer’  
  10.   gem ‘uglifier’, ‘>= 1.0.3’  
  11.   gem ‘twitter-bootstrap-rails’  
  12. end

now bundle it and install Bootstrap Twitter

$ bundle install

$ rails g bootstrap:install

this file will be installed in assests/bootstrap_and_overwrites_css.less

now if yuo run the server u can feel difference ..Now our page looks like this…


now we can improve our layout by bootstrap..


add <div class=”container”>  in body of the file.

now we are going to add sidebar to our page


    <div><%= yield %></div>
      <h2>About Us</h2>
      <p>This is a product based company.Here we are generating a very good products for pepole in a quality manner. Our products are most popular in the market.</p>	

now you can see the about us as sidebar in our app like this

Finally we are going to add the navigation bar such as somestore,contact us..etc

add these lines on top of the body of the file /app/views/layouts/application.html.erb

  • <div class=”navbar navbar-fixed-top”>  
  •   <div class=”navbar-inner”>  
  •     <div class=”container”>  
  •       <a class=”btn btn-navbar” data-toggle=”collapse” data-target=”.collapse”>  
  •         <span class=”icon-bar”></span>  
  •         <span class=”icon-bar”></span>  
  •         <span class=”icon-bar”></span>  
  •       </a>  
  •       <a class=”brand” href=”#”>Some Store</a>  
  •       <div class=”nav-collapse”>  
  •         <ul class=”nav”>  
  •           <li><%= link_to “Browse Products”, products_path %></li>  
  •           <li><%= link_to “Price List” %></li>  
  •           <li><%= link_to “Contact Us” %></li>  
  •           <li><%= link_to “Cart” %></li>  
  •         </ul>  
  •       </div>  
  •     </div>  
  •   </div>  
  • </div>  

now if you run the server you can see the navigations bar in our application…

Final Tweaks to The Header

Our application’s layout file is pretty much complete now but there are a couple of thing we need to add in the head section to ensure that it works everywhere.


  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode/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">

the above code for HTML5 support and mobile behaviour .

Next we’ll use Twitter Bootstrap to improve the look of this page. Instead of walking through each change manually we’ll use one of the generators provided by the gem.

$ rails g bootstrap:themed products -f

now run server by $ rails s

after adding products and price to our store apllication ..Our application looks like this…

Thats it…Thanks to all….happy times!!!!!

Author: Balaji

Hi..My name is Balaji and i am working as a Senior Software Developer in India. I am interested in Shell scripts, python, erlang , linux kernel .

2 thoughts on “Bootstrap Twitter in Rails”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: