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 to Gemfile

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

Step 2. Bundle install

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

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,

Step 6 - Result

You will see something like this when you reach index.erb with your Rails application.

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.