Ruby on Rails helpers for HTML, CSS, and JS toolkit from Twitter
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Twitter Bootstrap 2.0 Markup for Rails

Version v0.3.2.2
Build Status
Dependency Status
Changelog Changelog

This gem focuses on making it easier to use Twitter's Bootstrap 2.0. It's a collection of helpers which should make it faster to use all the components provided by Twitter Bootstrap.


Add to your Gemfile:

gem 'twitter-bootstrap-markup-rails', ''

Currently Supported

  • Alert messages
  • Inline labels
  • Buttons
  • Button dropdowns
  • Modal windows
  • Progress bars
  • Icons


Documentation is available on RubyDoc.


Rendering Alert

# => '<div class="alert"><a class="close">×</a>Hello!</div>'

Rendering Info Block Alert

# => '<div class="alert alert-block alert-info"><a class="close">×</a>Hello!</div>'

Same with basic helper:

bootstrap_alert_tag("Hello!", :block => true, :type => "info")
# => '<div class="alert alert-block alert-info"><a class="close">×</a>Hello!</div>'

Add Alert heading:

bootstrap_alert_tag("Hello!", :heading => "Hola!")
# => '<div class="alert"><a class="close">×</a><strong>Hola!</strong>Hello!</div>'

Notice Inline Label

# => '<span class="label notice">Info</span>'


bootstrap_button("Button Text", "#")
# => '<a class="btn" href="#">Button Text</a>'

Dropdown Buttons

bootstrap_button_dropdown do |b|
    b.bootstrap_button "Button Title", "#"
    b.link_to "First Dropdown Item", @item
    b.link_to "Second Dropdown Item", @item2
#  => '<div class="btn-group">
#        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
#          Button Title
#          <span class="caret"></span>
#        </a>
#        <ul class="dropdown-menu">
#          <!-- dropdown menu links -->
#        </ul>
#      </div>'

Navigation lists

Basic tabs example

bootstrap_navigation do |nav|
  nav.link_to "Nav1", "/link1", :active_nav => true
  nav.link_to "Nav2", "/link2"
# => '<ul class="nav nav-tabs">
#       <li class="active">
#         <a href="/link1">Nav1</a>
#       </li>
#       <li>
#         <a href="/link2">Nav2</a>
#       </li>
#     </ul>'

Basic pills example

bootstrap_navigation(:type => "pills") do |nav|
  nav.link_to "Nav1", "/link1"
  nav.link_to "Nav2", "/link2", :active_nav => true
# => '<ul class="nav nav-pills">
#       <li>
#         <a href="/link1">Nav1</a>
#       </li>
#       <li class="active">
#         <a href="/link2">Nav2</a>
#       </li>
#     </ul>'

Stacked tabs example

bootstrap_navigation(:type => "tabs", :stacked => true) do |nav|
  nav.link_to "Nav1", "/link1", :active_nav => true
  nav.link_to "Nav2", "/link2"
# => '<ul class="nav nav-tabs nav-stacked">
#       <li class="active">
#         <a href="/link1">Nav1</a>
#       </li>
#       <li>
#         <a href="/link2">Nav2</a>
#       </li>
#     </ul>'

Stacked pills example

bootstrap_navigation(:type => "pills", :stacked => true) do |nav|
  nav.link_to "Nav1", "/link1"
  nav.link_to "Nav2", "/link2", :active_nav => true
# => '<ul class="nav nav-pills nav-stacked">
#       <li>
#         <a href="/link1">Nav1</a>
#       </li>
#       <li class="active">
#         <a href="/link2">Nav2</a>
#       </li>
#     </ul>'

Modal popup example

bootstrap_modal(dom_id: 'a_dom_id', fade: true, header_title: "I'm a bootstrap modal popup") do |modal|
  modal.body do |c|
   c.content_tag :div, "the body"
  modal.footer do |f|
    f.bootstrap_button "Save", "/link1", :type => 'btn-primary'
    f.bootstrap_button "Cancel", "/link2"
# => '<div class="modal fade" id="a_dom_id">
#       <div class="modal-header">
#         <a class="close" data-dismiss="modal">&times</a>
#         <h3>I'm a bootstrap modal popup</h3>
#       </div>
#       <div class="modal-body">
#         <div>the body</div>
#       </div>
#       <div class="modal-footer">
#         <a class="btn btn-primary" href="/link1">Save</a>
#         <a class="btn" href="/link2">Cancel</a></div>
#       </div>
#     </div>'


For SimpleNavigation

If you are using simple-navigation gem you can use the navigation renderer like this:

render_navigation(level: 1..2, renderer: :bootstrap_topbar_list, expand_all: true)


In the spirit of free software, everyone is encouraged to help improve this project.

Here are some ways you can contribute:

  • by using alpha, beta, and prerelease versions
  • by reporting bugs
  • by suggesting new features
  • by writing or editing documentation
  • by writing specifications
  • by writing code (no patch is too small: fix typos, add comments, clean up inconsistent whitespace)
  • by refactoring code
  • by closing issues
  • by reviewing patches

Submitting an Issue

We use the GitHub issue tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include a gist that includes a stack trace and any details that may be necessary to reproduce the bug, including your gem version, Ruby version, and operating system. Ideally, a bug report should include a pull request with failing specs.

Submitting a Pull Request

  1. Fork the project.
  2. Create a topic branch.
  3. Implement your feature or bug fix.
  4. Add documentation for your feature or bug fix.
  5. Run bundle exec rake yard. If your changes are not 100% documented, go back to step 4.
  6. Add specs for your feature or bug fix.
  7. Run bundle exec rake spec. If your changes are not 100% covered, go back to step 6.
  8. Commit and push your changes.
  9. Submit a pull request. Please do not include changes to the gemspec, version, or history file. (If you want to create your own version for some reason, please do so in a separate commit.)

Supported Ruby Versions

This library aims to support and is tested against the following Ruby implementations:

  • Ruby 1.8.7
  • Ruby 1.9.2
  • Ruby 1.9.3
  • Rubinius

Bitdeli Badge