How to create a new rails app with twitter bootstrap

I find myself doing this a lot lately. Here are some notes to help me do this quickly in the future.

Step 1: Create new rails application

> rails new myApp

Step 2: Install twitter bootstrap

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

This method installs bootstrap using the Less style sheets.

Add these gems following to your Gemfile

gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"

> bundle install
> rails generate bootstrap:install –no-coffeescript

Step 3: Add some scaffolding to test things out

> rails g scaffold Post title:string description:text
> rake db:migrate
> rails g bootstrap:themed Posts (optional)

Start your server and check your progress.

> rails s
> http://localhost:3000/posts

Step 4: Make use fluid layout

application.html.erb

<div class="container-fluid">
  <%= yield %>
</div>

Step 5: Add some twitter bootstrap layout columns

application.html.erb

<body>

<div class="container-fluid">
  <div class="row">
    <div class="span9"><%= yield %></div>
    <div class="span3">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

</body>

Step 6: Add a navbar (inverse)

application.html.erb

<body>

<div class="navbar navbar-inverse 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>
      </a>
      <a class="brand" href="#">Some Store</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><%= link_to "Browse Posts", posts_path %></li>
          <li><%= link_to "Price List" %></li>
          <li><%= link_to "Contact Us" %></li>
          <li><%= link_to "Cart" %></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
...

Now, when you run this, notice how everything looks good when the collapsed navbar kicks in.

But when you expand the window to full screen the navbar overrides what appears at the top.

To account for this we need to add some padding to the twitter bootstrap non-responsive state. You can do this by adding this body padding between the two import lines below.

bootstrap_and_override.css.less

@import "twitter/bootstrap/bootstrap";
body { padding-top: 70px; }
@import "twitter/bootstrap/responsive";

Your page should now look like this:

http://getbootstrap.com/components/#navbar-fixed-top

Links that help:
https://github.com/seyhunak/twitter-bootstrap-rails
http://stackoverflow.com/questions/18371318/installing-bootstrap-3-on-rails-app
http://getbootstrap.com/components/#navbar-fixed-top

The Agile Warrior