Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Ruby on Rails helpers for HTML, CSS, and JS toolkit from Twitter

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.0
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', '0.3.0'

Currently Supported

  • Alert messages
  • Inline labels
  • Buttons
  • Button dropdowns


Documentation is available on RubyDoc.


Render Alert in your view:

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

Render Info Block Alert in your view:

# => '<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>
        <ul class="dropdown-menu">
            <!-- dropdown menu links -->

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>
         <a href="/link2">Nav2</a>

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">
         <a href="/link1">Nav1</a>
       <li class="active">
         <a href="/link2">Nav2</a>

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>
         <a href="/link2">Nav2</a>

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">
         <a href="/link1">Nav1</a>
       <li class="active">
         <a href="/link2">Nav2</a>

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 class="modal-body">
          <div>the body</div>
        <div class="modal-footer">
          <a class="btn btn-primary" href="/link1">Save</a>
          <a class="btn" href="/link2">Cancel</a></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
Something went wrong with that request. Please try again.