Skip to main content

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.

Comments

Popular posts from this blog

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).?

Gem::LoadError (Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).) In rails?


1)change the gemfile in mysql version
 gem 'mysql2'

2)Change to mysql2 version
 gem 'mysql2','0.3.20'

Active Scaffold : Add radio buttons to your form ruby on rails ?

Active Scaffold : Add radio buttons to your form ruby on rails ?

The way to add radio buttons to your active scaffold create/update from is as shown below

#Controller

class UsersController < ApplicationController
active_scaffold :user do |config|
config.label = “Users”
config.columns = [:name, :gender]
config.columns[:gender].form_ui = :radio
config.columns[:gender].options[:options] = [['Male', '1'], ['Female','2']]
end
end

Get user accessing ip address in rails?

Get user accessing ip address rails?

request.ip ->returns the ip, whether is is a local proxy ip (localhost address) or not.
*request.remote_ip -> is smarter and gets the ip address of the client outside of local proxies.
3)If you are using apache in front of a mongrel, then remote_ip will return the source address of the request, which in this case will be local host because the Apache web server is making the request, so instead put this in your controller:

@remote_ip = request.env["HTTP_X_FORWARDED_FOR"]