This is handy if you want to use twitter bootstrap, but don’t want to be dependent on updates from gems. With this you can update your bootstrap library’s whenever you want.

Create a new app

rails new foo

Create some scaffolding

rails g scaffold Post title:string description:text
rake db:migrate

Should have something that looks like this:

rails-app-scratch

Add the twitter bootstrap files from scratch

Download Bootstrap http://getbootstrap.com/

Copy
bootstrap/dist/css/bootstrap.css
bootstrap/dist/css/bootstrap.min.css

to: app/assets/stylesheets

Copy
bootstrap/dist/js/bootstrap.js
bootstrap/dist/js/bootstrap.min.js

to: app/assets/javascripts

Append to: app/assets/stylesheets/application.css
*= require bootstrap

adding-twitterbootstrap-cs

Append to: app/assets/javascripts/application.js
//= require bootstrap

adding-twitterbootstrap-js

App should now look like this:

app-wit-twitter-boostrap-files

Add the following twitter bootstrap code

app/view/layout/application.html.erb

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>
  
<div class='container-fluid'>
  <% flash.each do |key, value| %>
      <div class='alert alert-<%= key %>'><%= value %></div>
  <% end %>
  <div class='span12'><%= yield %></div>
  <%= debug(params) if Rails.env.development? %>
</div>
  
</body>

You can also add some copy copy like this:

app/views/permits/index.html.erb

<div class="container">
 
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
 
</div><!-- /.container -->

Should now look like this:

twitter-bootstrap-page-with-code

And you will know the javascript is working when you click on the x3 bars and they expand like this:

twitter-bootstrap-menu-expanded

But you can also see we have a problem. The top of our page is cut off by the menu. Fix that by creating a custom.css.scss file and putting the following code in there.

app/assets/stylesheets/custom.css.scss

body {
  padding-top: 50px; /* or 165px */
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

twitter-bootstrap-fixing-spacing-at-the-top

Should now look like this:

rails-twitter-bootstrap-app-wrong-font

OK. Not bad. Could stop here if we want. But one thing to note is that the scaffold.css.scss font (this comes as part of the rails scaffolding) is overriding our default twitter bootstrap font (you can tell by going to the twitter website and seeing there text).

To fix that comment out or remove the text from scaffolds.css.scss

app/assets/stylesheets/scaffolds.css.scss

//body {
//  background-color: #fff;
//  color: #333;
//  font-family: verdana, arial, helvetica, sans-serif;
//  font-size: 13px;
//  line-height: 18px;
//}
//
//p, ol, ul, td {
//  font-family: verdana, arial, helvetica, sans-serif;
//  font-size: 13px;
//  line-height: 18px;
//}

Your app should then look something like this:

twitter-bootstrap-and-rails-from-scratch

Voila! You are done. Now you can update, or change twitter bootstrap to any version you like without having to wait for a gem to update.

Links that help:

http://stackoverflow.com/questions/18371318/installing-bootstrap-3-on-rails-app
http://getbootstrap.com/examples/starter-template/

Update

The gem way to use Twitter bootstrap is

gem 'bootstrap-sass',             '3.2.0.0'

And then convert scaffolding generated models by replacing

        format.html { redirect_to @permit, notice: 'Permit was successfully created.' }

With

      if @permit.save
        flash[:success] = 'Permit was successfully created.'
        format.html { redirect_to @permit }
        format.json { render :show, status: :created, location: @permit }
      else

      flash.now[:danger] = 'Invalid email/password combination'
      flash[:success] = &amp;amp;amp;quot;Welcome to the Construction Work Permit System!&amp;amp;amp;quot;

Replace scaffolding buttons

 &lt;%= f.submit %&gt;

with

    &lt;div class=&quot;form-actions&quot;&gt;
      &lt;%= f.submit nil, :class =&gt; 'btn btn-primary' %&gt;
    &lt;/div&gt;