How to integrate Twitter Bootstrap Rails with Rails

How to integrate Twitter Bootstrap Rails with Rails ?


How to Integrate Twitter Bootstrap Rails with Rails project is the First question that developers have to face before starting a new project. It can be done using Gem twitter-bootstrap-rails or manually.
What is Twitter Bootstrap?

Twitter Bootstrap is popular open source CSS, JS framework used for beautifying your Web Application. It was built at Twitter by Mark Otto and Jacob Thornton to have consistency of UI for their tools. The tool became so popular that it is now being used by many developers as the framework for their web world
Option 1 - Using twitter-bootstrap-rails Gem:

Twitter Bootstrap can be integrated with Rails using twitter-bootstrap-rails using following steps.
Step 1. Add gem 'twitter-bootstrap-rails' to your Gemfile like this.

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


Step 2. Run following command in your Rails application directory

bundle install

This will install twitter-bootstrap-rails gem for your Ruby and will consider the gem for your Rails project
Step 3. Configure Bootstrap resources in proper directory by command,

rails g:bootstrap install static
# outout of rails g:bootstrap install static command
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/bootstrap.js.coffee
      create  app/assets/stylesheets/bootstrap_and_overrides.css
      create  config/locales/en.bootstrap.yml
        gsub  app/assets/stylesheets/application.css
        gsub  app/assets/stylesheets/application.css

This will copy js, css resources in proper assets directory in your Rails application
Step 4. After this you will be able to use classes from CSS and JS functions with your web application code
Step 5. Testing using sample form in ERB

Suppose we add some code in certain ERB to test whether Rails application is properly integrated with Twitter Bootstrap. Let us say we have index.erb file and which is displayed and we add following code which used bootstrap classes,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55    

<form class="form-horizontal">
<fieldset>
<legend>Sign up using email</legend>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input id="name" name="name" type="text" placeholder="Firstname Lastname" class="input-xlarge" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" name="email" type="text" placeholder="username@domain.com" class="input-xlarge" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input id="username" name="username" type="text" placeholder="username" class="input-xlarge" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input id="password" name="password" type="password" placeholder="password" class="input-xlarge" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="confirm_password">Confirm Password</label>
<div class="controls">
<input id="confirm_password" name="confirm_password" type="password" placeholder="password" class="input-xlarge" required="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="gender">Gender</label>
<div class="controls">
<label class="radio inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="Female" checked="checked">
Female
</label>
<label class="radio inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="Male">
Male
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="submit" name="submit" class="btn btn-success">Sign Up</button>
<button id="reset" name="reset" class="btn btn-info">Reset</button>
</div>
</div>
</fieldset>
</form>

view raw sign_up_form.html.erb hosted with ❤ by GitHub

Step 6 - Result

You will see something like this when you reach index.erb with your Rails application.
how to integrate twitter bootstrap rails
Option 2 - Manual Integration with Rails

Step 1. Download Twitter Bootstrap from here
Step 2. Copy CSS files in the app/assets/css directory of Rails Project
Step 3. Copy JS resources in the app/assets/js directory of Rails Project
Step 4, Step 5 and Step 6 can be tried from option 1 after above step 3 is executed. As above steps have ensured integration of Twitter Bootstrap with your Rails Application.
Conclusion

We learned how to integrate twitter bootstrap rails with Rails project using Gem twitter-bootstrap-rails or manually by integrating JS, CSS in Rails project codebase.
If you have any problem in integration, let us know through comments so that we can help out.