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 the Current url in ruby on rails

request.refererrequest.fullpathrequest.fullpath.split("?")[0]request.referer or request.env['HTTP_REFERER'] your controller to get the referer url. 

--------------------
request.original_url
request.url
request.host_with_port
<link rel="canonical" href="<%= request.url %>" />
<%=request.path%>
How can I get the current absolute URL in my Ruby on Rails view?
The request.request_uri only returns the relative URL.
request.env['REQUEST_URI']

 For Rails 3.2 or Rails 4 you should use request.original_url to get the current URL. More detail.

For Rails 3: You want "#{request.protocol}#{request.host_with_port}#{request.fullpath}", since request.url is now deprecated.

For Rails 2: You want request.url instead of request.request_uri. This combines the protocol (usually http://) with the host, and request_uri to give you the full address