Ruby on Rails helpers for HTML, CSS, and JS toolkit from Twitter
Latest commit c8ff20b Nov 25, 2013 @pusewicz Update .travis.yml

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