Overview

Combine the beauty of Bootstrap’s design and the expressiveness of Ruby.
Get the best of both worlds with the least amount of keystrokes.

Bootstrap is a great framework, but requires you to write many lines of HTML code even for simple components.
For instance, you need to write the following HTML to show a dismissible alert:

<div class="alert alert-info alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  You accepted the Terms of service.
</div>

Writing this for every dismissible alert in a web site is cumbersome, repetitive, and prone to errors.
With Bh, you can achieve the same result with just one line of code:

<%= alert_box 'You accepted the Terms of service.', dismissible: true %>

How to install

Bh is compatible with a variety of Ruby frameworks: Rails 3.2, Rails 4, Padrino and Middleman. To include Bh in your project:

  1. Open the Gemfile file of your Rails, Padrino or Middleman project and add the line gem 'bh', '~> 1.2'.
  2. only if you are using Middleman: open config.rb and add activate :bh.
  3. only if you are using Padrino: open app.rb and add register Bh.

Bh does not overwrite any helper or style, so you can easily mix-and-match Bootstrap helpers with your existing HTML views.

The list of available Boostrap helpers is detailed hereafter.

Alerts

Use the alert_box helper to display Bootstrap-styled alert messages.

Basic alerts

Use alert_box without options to display a basic informational message.

<%= alert_box 'You accepted the Terms of service.' %>

generates the following HTML:

<div class="alert alert-info" role="alert">You accepted the Terms of service.</div>

Dismissible alerts

Add dismissible: true to add a close button to the alert box.

<%= alert_box 'You accepted the Terms of service.', dismissible: true %>

generates the following HTML:

<div class="alert alert-info" role="alert">
  <button class="close" data-dismiss="alert" type="button">
    <span aria-hidden="true">×</span><span class="sr-only">Close</span>
  </button>
  You accepted the Terms of service.
</div>

Contextual alerts

Set the context option to change the color (and semantic context) of the alert message.

Available contexts are :success, :info (default), :warning and :danger.

<%= alert_box 'You accepted the Terms of service.', context: :success %>

displays a success alert message:

<div class="alert alert-success" role="alert">You accepted the Terms of service.</div>

Complex alerts

To include HTML tags or a long text in the alert, pass your content in a block.

You can also specify custom options which will be added to the alert’s <div> tag.

<%= alert_box context: :warning, dismissible: true, id: 'alert', class: :en, data: {js: 1} do %>
  <em>Thanks!</em> You accepted the <%= link_to 'Terms of service', '/#terms' %>.
<% end %>

displays a dismissible warning alert message which includes appropriately styled links and highlighted text:

<div id="my-alert" class="en alert alert-warning" data-js="1" role="alert">
  <button type="button" class="close" data-dismiss="alert">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
  </button>
  <em>Thanks!</em> You accepted the <a class="alert-link" href="/#terms">Terms of service</a>.
</div>

Panels

Use the panel helper to display Bootstrap-styled panels.

Basic panels

Use panel without options to display a basic panel.

<%= panel 'You accepted the Terms of service.' %>

generates the following HTML:

You accepted the Terms of service.
<div class="panel panel-default">
  <div class="panel-body">You accepted the Terms of service.</div>
</div>

Panels with heading

Use the :heading options to display a heading above the panel.

<%= panel 'You accepted the Terms of service.', heading: 'Congratulations' %>

generates the following HTML:

Congratulations
You accepted the Terms of service.
<div class="panel panel-default">
  <div class="panel-heading">Congratulations</div>
  <div class="panel-body">You accepted the Terms of service.</div>
</div>

Panels with title

Use the :title options to display a title above the panel.

<%= panel 'You accepted the Terms of service.', title: 'Congratulations' %>

generates the following HTML:

Congratulations

You accepted the Terms of service.
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Congratulations</h3>
  </div>
  <div class="panel-body">You accepted the Terms of service.</div>
</div>

Contextual panels

Set the context option to change the color (and semantic context) of the panel.

Available contexts are :default (default), :primary, :success, :info, :warning and :danger.

<%= panel 'You accepted the Terms of service.', title: 'Thanks', context: :success %>

displays a success panel message:

Thanks

You accepted the Terms of service.
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">Thanks</h3>
  </div>
  <div class="panel-body">You accepted the Terms of service.</div>
</div>

Panels with custom tag

Set the tag option to use a different HTML tag to wrap the panel.

<%= panel 'You accepted the Terms of service.', tag: :aside %>

displays a panel wrapped in an <aside> tag:

<aside class="panel panel-default">
  <div class="panel-body">You accepted the Terms of service.</div>
</aside>

Complex panels

To include HTML tags or a long text in the panel, pass your content in a block.

You can also specify custom options which will be added to the alert’s <div> tag.

<%= panel heading: 'Thanks', context: :info, id: 'panel', class: :en, data: {js: 1} do %>
  <div class='panel-body'>You accepted the Terms of service. <%= icon :ok %></div>
<% end %>

displays an info (blue background) panel with a vector icon in the body:

Thanks
You accepted the Terms of service. 
<div id="panel" class="en panel panel-info" data-js="1">
  <div class="panel-heading">Thanks</div>
  <div class="panel-body">
    You accepted the Terms of service.
    <span class="glyphicon glyphicon-ok"></span>
  </div>
</div>

Panel rows

Use the panel_row helper to display a row of horizontally-aligned Bootstrap-styled panels.

Basic row of panels

Use panel_row with the :column_class option to wrap panels of the same size in a row.

<%= panel_row column_class: 'col-sm-4' do %>
  <%= panel 'Panel #1' %>
  <%= panel 'Panel #2' %>
  <%= panel 'Panel #3' %>
<% end %>

generates the following HTML:

Panel #1
Panel #2
Panel #3
<div class="row">
  <div class="col-sm-4">
    <div class="panel panel-default"><div class="panel-body">Panel #1</div></div>
  </div>
  <div class="col-sm-4">
    <div class="panel panel-default"><div class="panel-body">Panel #2</div></div>
  </div>
  <div class="col-sm-4">
    <div class="panel panel-default"><div class="panel-body">Panel #3</div></div>
  </div>
</div>

Complex row of panels

You can specify custom options which will be added to the panel row’s <div> tag.

<%= panel_row column_class: 'col-sm-6', id: 'panel-row', class: :en, data: {js: 1} do %>
  <%= panel 'John Smith', title: 'User', context: :info %>
  <%= panel title: 'Phone' do %>
    <div class='panel-body'><%= icon :earphone %> 323-555-5555</div>
  <% end %>
<% end %>

displays a row of two panels with title and HTML body:

User

John Smith

Phone

323-555-5555 
<div id="panel-row" class="en row" data-js="1">
  <div class="col-sm-6">
    <div class="panel panel-info">
      <div class="panel-heading"><h3 class="panel-title">User</h3></div>
      <div class="panel-body">John Smith</div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading"><h3 class="panel-title">Phone</h3></div>
      <div class="panel-body">
        <span class="glyphicon glyphicon-earphone"></span> 323-555-5555
      </div>
    </div>
  </div>
</div>

Modals

Use the modal helper to display Bootstrap-styled modals.

Use modal without options to display a button which toggles a modal with the given body when clicked.

<%= modal 'Do what you want!' %>

generates the following HTML (click on the button to toggle the modal):

<button class="btn btn-default" data-toggle="modal" data-target="#modal-6812963836">
  Modal
</button>
<div class="modal fade" id="modal-6812963836" tabindex="-1" role="dialog" aria-labelledby="label-modal-6812963836" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-6812963836">Modal</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

Use modal with the :size option to display either a large or a small modal.

<%= modal 'Do what you want!', size: 'small' %>

generates a button that toggles a small modal:

<button class="btn btn-default" data-toggle="modal" data-target="#modal-8340973025">
  Modal
</button>
<div class="modal fade" id="modal-8340973025" tabindex="-1" role="dialog" aria-labelledby="label-modal-8340973025" aria-hidden="true" style="display: none;">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-8340973025">Modal</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

Use modal with the :title option to display a custom title at the top of the modal.

<%= modal 'Do what you want!', title: 'Terms of service' %>

generates the following HTML:

<button class="btn btn-default" data-toggle="modal" data-target="#modal-4484834862">
  Terms of service
</button>
<div class="modal fade" id="modal-4484834862" tabindex="-1" role="dialog" aria-labelledby="label-modal-4484834862" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-4484834862">Terms of service</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

Use modal with the {button: :caption} option to display a custom caption on the toggle button.

<%= modal 'Do what you want!', button: {caption: 'Click me!'}  %>

generates the following HTML:

<button class="btn btn-default" data-toggle="modal" data-target="#modal-573010087">
  Click me!
</button>
<div class="modal fade" id="modal-573010087" tabindex="-1" role="dialog" aria-labelledby="label-modal-573010087" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-573010087">Modal</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

Use modal with the button: :context option to change the color (and semantic context) of the toggle button.

Available contexts are :default (default), :primary, :success, :info, :warning and :danger.

<%= modal 'Do what you want!', title: 'Terms of service', button: {context: :info}  %>

displays an info (blue background) button to toggle a modal:

<button class="btn btn-info" data-toggle="modal" data-target="#modal-8940504529">
  Terms of service
</button>
<div class="modal fade" id="modal-8940504529" tabindex="-1" role="dialog" aria-labelledby="label-modal-8940504529" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-8940504529">Terms of service</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

Use modal with the {button: :size} option to change the size of the toggle button.

<%= modal 'Do what you want!', button: {size: :xs} %>

displays an extra-small button to toggle a modal:

<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#modal-4545587695">
  Modal
</button>
<div class="modal fade" id="modal-4545587695" tabindex="-1" role="dialog" aria-labelledby="label-modal-4545587695" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal-4545587695">Modal</h4>
      </div>
      <div class="modal-body">Do what you want!</div>
    </div>
  </div>
</div>

To include HTML tags or a long text in the modal, pass your content in a block.

You can specify a custom id which will be added to the modal’s <div> tag.

You can also specify a custom {button: :class} which will add a class to the toggle <button> tag.

<%= modal title: 'Terms of service', size: :large, id: 'modal', button: {class: :en} do %>
  <div class="modal-body">Please accept the Terms of service.</div>
  <div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
<% end %>

displays a button that toggles a large modal with a title and HTML content:

<button class="en btn btn-default" data-toggle="modal" data-target="#modal">Terms of service</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="label-modal" aria-hidden="true" style="display: none;">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="label-modal">Terms of service</h4>
      </div>
      <div class="modal-body">Please accept the Terms of service.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Accept</button>
      </div>
    </div>
  </div>
</div>

Navs

Use the nav helper to display Bootstrap-styled navs.

Basic navs

Use nav without options to display the included links and forms as a row of tabs.

Note that links and forms are automatically wrapped in <li> tags if you use the helpers link_to, button_to or form_for.

Additionally, if any link matches the current URL, its <li> tag automatically gets the active class.

<%= nav do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/users">Users</a></li>
  <li><a href="/profile">Profile</a></li>
</ul>

Navs with justified tabs

Use the layout: :justified option to make tabs occupy the entire width of their parent.

<%= nav layout: :justified do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/profile">Profile</a></li>
</ul>

Navs with pills

Use the as: :pills option to make tabs look like pills.

<%= nav as: :pills do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<ul class="nav nav-pills" role="tablist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/profile">Profile</a></li>
</ul>

Navs with stacked pills

Use the layout: :stacked option to make pills vertically stacked.

<%= nav as: :pills, layout: :stacked do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<ul class="nav nav-pills nav-stacked" role="tablist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/users">Users</a></li>
    <li><a href="/profile">Profile</a></li>
</ul>

Complex navs

To include HTML tags or a long text in the nav, pass your content in a block.

You can also specify custom options which will be added to the nav’s <ul> tag.

<%= nav as: :pills, id: 'nav', class: :en, data: {js: 1} do %>
  <li class="active"><a href="/">Home</a></li>
  <%= link_to 'Users', '/#users' %>
  <%= link_to 'Profile', '/#profile' %>
<% end %>

generates the following HTML:

<ul id="nav" class="en nav nav-pills" data-js="1" role="tablist">
  <li class="active"><a href="/">Home</a></li>
  <li><a href="/#users">Users</a></li>
  <li><a href="/#profile">Profile</a></li>
</ul>

Navbars

Use the navbar helper to display Bootstrap-styled navbars.

Use navbar without options to display a basic navbar.

Wrap the content that should always be visible (no matter the screen size) with the vertical helper.

Wrap the content that should be collapsed for small screen sizes with the horizontal helper.

<%= navbar do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
  <%= horizontal do %>
    <%= nav class: 'navbar-right' do %>
      <%= link_to 'Profile', root_path %>
      <%= link_to 'Settings', users_path %>
    <% end %>
  <% end %>
<% end %>

generates a navbar with the following content (try resizing your browser):

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-4752394" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-4752394">
      <ul class="navbar-right nav navbar-nav">
        <li><a href="/">Profile</a></li>
        <li><a href="/users">Settings</a></li>
      </ul>
    </div>
  </div>
</nav>

Use the :inverted option to invert the palette of colors of the navbar.

<%= navbar inverted: true do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
<% end %>

generates a navbar with a black background:

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-4828209" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
  </div>
</nav>

Use the :fluid option for a full width navbar, spanning the entire width of your viewport.

<%= navbar fluid: true do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
<% end %>

generates a navbar with a fluid container:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-8120845" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
  </div>
</nav>

Use the position: :static option to have the navbar scroll away with the page.

<%= navbar position: :static do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
<% end %>

generates a navbar that scrolls away with the page:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-3676942" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
  </div>
</nav>

Use the position: :top option to fix the navbar at the top of the page.

Set the :padding option to specify the padding to leave between the top of the page and the body (defaults to 70px).

<%= navbar position: :top do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
<% end %>

generates a navbar fixed to the top with a padding of 70px (click the button to show/hide):

<style>body {padding-top: 70px}</style>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-9566942" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
  </div>
</nav>

Use the position: :bottom option to fix the navbar at the bottom of the page.

Set the :padding option to specify the padding to leave between the body and the bottom of the page (defaults to 70px).

<%= navbar position: :bottom, padding: 100 do %>
  <%= vertical do %>
    <%= link_to 'Home', root_path %>
  <% end %>
<% end %>

generates a navbar fixed to the bottom with a padding of 100px (click the button to show/hide):

<style>body {padding-bottom: 100px}</style>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-3226942" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand">Home</a>
    </div>
  </div>
</nav>

You can specify a custom id which will be used for the navbar’s collapsable <div>.

You can also specify custom options in the vertical and horizontal helpers which will be added to their <div> tags. 

<%= navbar id: 'navbar' do %>
  <%= vertical id: 'vertical', class: :en, data: {js: 1} do %>
    <%= link_to 'Home', '/' %>
  <% end %>
  <%= horizontal class: :en, data: {js: 2} do %>
    <%= nav class: 'navbar-left' do %>
      <%= link_to 'Profile', '/#profile' %>
      <%= link_to 'Settings', '/#settings' %>
    <% end %>
  <% end %>
<% end %>

generates the following HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div id="vertical" class="en navbar-header" data-js="1">
      <button class="navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Home</a>
    </div>
    <div class="en collapse navbar-collapse" data-js="2" id="navbar">
      <ul class="navbar-left nav navbar-nav">
        <li><a href="/#profile">Profile</a></li>
        <li><a href="/#settings">Settings</a></li>
      </ul>
    </div>
  </div>
</nav>

Dropdowns

Use the dropdown helper to display Bootstrap-styled dropdowns.

Use dropdown without options to display a button with the given caption and the included links in a dropdown menu.

<%= dropdown 'Menu' do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML (click on the button to toggle the dropdown):

<div class="btn-group">
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-8746733656" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-8746733656">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
    <li role="presentation"><a href="/profile" role="menuitem" tabindex="-1">Profile</a></li>
  </ul>
</div>

Use dropdown with the align: :right option to align the dropdown to the rightmost side of the button.

<%= dropdown 'Menu', align: :right do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<div class="btn-group">
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-7386261609" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="label-dropdown-7386261609">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
    <li role="presentation"><a href="/profile" role="menuitem" tabindex="-1">Profile</a></li>
  </ul>
</div>

Use dropdown with the groupable: true option to have multiple dropdowns grouped on the same line, rather than stacked.

<%= dropdown 'Menu', groupable: true do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
<% end %>

<%= dropdown 'Profile', groupable: true do %>
  <%= link_to 'Edit Profile', edit_profile_path %>
<% end %>

generates the following HTML:

<div class="btn-group">
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-9191819792" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-9191819792">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
  </ul>
</div>
<div class="btn-group">
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-727008945" data-toggle="dropdown">
    Profile
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-727008945">
    <li role="presentation"><a href="/profile" role="menuitem" tabindex="-1">Edit Profile</a></li>
  </ul>
</div>

Use dropdown with the direction: :up option to show a dropup, that is, a menu that appears above the button.

<%= dropdown 'Menu', direction: :up do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<div class="btn-group dropup">
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-3758764429" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-3758764429">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
    <li role="presentation"><a href="/profile" role="menuitem" tabindex="-1">Profile</a></li>
  </ul>
</div>

Use dropdown with the :context option to change the color (and semantic context) of the toggle button.

Available contexts are :default (default), :primary, :success, :info, :warning and :danger.

<%= dropdown 'Menu', context: :info do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
<% end %>

displays an info (blue background) button to toggle a dropdown:

<div class="btn-group">
  <button class="dropdown-toggle btn btn-info" type="button" id="label-dropdown-840308622" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-840308622">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
  </ul>
</div>

Use dropdown with the :size option to change the size of the toggle button.

<%= dropdown 'Menu', size: :extra_small do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
<% end %>

displays an extra small button to toggle a dropdown:

<div class="btn-group">
  <button class="dropdown-toggle btn btn-default btn-xs" type="button" id="label-dropdown-874132984" data-toggle="dropdown">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-874132984">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
  </ul>
</div>

Use dropdown with the split: true option to show a split button that only toggles the dropdown when clicked on the right side.

<%= dropdown 'Menu', split: true do %>
  <%= link_to 'Home', root_path %>
  <%= link_to 'Users', users_path %>
  <%= link_to 'Profile', profile_path %>
<% end %>

generates the following HTML:

<div class="btn-group">
  <button type="button" class="btn btn-default">Menu</button>
  <button class="dropdown-toggle btn btn-default" type="button" id="label-dropdown-9246388703" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="label-dropdown-9246388703">
    <li role="presentation"><a href="/" role="menuitem" tabindex="-1">Home</a></li>
    <li role="presentation"><a href="/users" role="menuitem" tabindex="-1">Users</a></li>
    <li role="presentation"><a href="/profile" role="menuitem" tabindex="-1">Profile</a></li>
  </ul>
</div>

To include HTML tags or a long text in the dropdown, pass your content in a block.

You can specify a custom id which will be added to the dropdown’s <ul> tag.

You can also specify a custom {button: :class} which will be added to the toggle <button> tag.

<% dropdown 'Menu', split: true, id: 'dropdown', button: {class: :en} do %>
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#"><%= content_tag :em, 'Profile' %></a></li>
<% end %>

generates the following HTML:

<div class="btn-group">
  <button type="button" class="en btn btn-default">Menu</button>
  <button class="dropdown-toggle en btn btn-default" type="button" id="dropdown" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
    <li role="presentation"><a href="#">Home</a></li>
    <li role="presentation"><a href="#"><em>Profile</em></a></li>
  </ul>
</div>

Progress bars

Use the progress_bar helper to display Bootstrap-styled progress bars.

Basic progress bar

Use progress_bar with the :percentage option to show a progress bar.

<%= progress_bar percentage: 30 %>

generates the following HTML:

30% 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar" role="progressbar" style="width: 30%">
    <span class="sr-only">30%</span>
  </div>
</div>

Progress bar with label

Use progress_bar with the :label option to show a label on the progress bar.

Set :label to a string to use a custom label, or to true to use its value as the label.

<%= progress_bar percentage: 30, label: true %>
<%= progress_bar percentage: 30, label: "thirty percent" %>

generates the following HTML:

30%
thirty percent 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar" role="progressbar" style="width: 30%">
    30%
  </div>
</div>
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar" role="progressbar" style="width: 30%">
    thirty percent
  </div>
</div>

Contextual progress bars

Use progress_bar with the :context option to change the color (and semantic context) of the progress bar.

Available contexts are :success, :info, :warning and :danger.

<%= progress_bar percentage: 30, context: :warning %>

generates the following HTML:

30% (warning) 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar progress-bar-warning" role="progressbar" style="width: 30%">
    <span class="sr-only">30% (warning)</span>
  </div>
</div>

Striped progress bars

Use progress_bar with the striped: true option to display a striped progress bar.

<%= progress_bar percentage: 30, striped: true %>

generates the following HTML:

30% 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar progress-bar-striped" role="progressbar" style="width: 30%">
    <span class="sr-only">
      30%
    </span>
  </div>
</div>

Animated progress bars

Use progress_bar with the animated: true option to display a striped animated progress bar.

<%= progress_bar percentage: 30, animated: true %>

generates the following HTML:

30% 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar progress-bar-striped active" role="progressbar" style="width: 30%">
    <span class="sr-only">
      30%
    </span>
  </div>
</div>

Stacked progress bars

Use progress_bar with an array of options (rather than a single Hash) to display a set of stacked progress bars.

<%= progress_bar [{percentage: 30, context: :success, label: 'Completed'}, {percentage: 40, context: :warning, animated: true, label: 'Pending'}] %>

generates the following HTML:

Completed
Pending 
<div class="progress">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar progress-bar-success" role="progressbar" style="width: 30%">
    Completed
  </div>
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" style="width: 40%">
    Pending
  </div>
</div>

Complex progress bars

You can specify custom options for each progress bar which will be added to the progress bar’s <div> tag.

You can also specify custom options for the wrapping <div> container by passing them as the last argument.

<%= progress_bar({percentage: 30, id: 'bar', data: {js: 1}}, id: 'container', class: :en) %>

generates the following HTML:

30% 
<div id="container" class="en progress">
  <div id="bar" data-js="1" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar" role="progressbar" style="width: 30%">
    <span class="sr-only">30%</span>
  </div>
</div>

Icons

Use the icon helper to display vector icons.

Basic example

Use icon without options to display any of the 200 glyphicons available in Bootstrap.

<%= icon :user %>

displays the User icon from the Glyphicons library:

<span class="glyphicon glyphicon-user"></span>

Font Awesome example

Use icon with the library: :font_awesome option to display any of the 479 icons available in Font Awesome.

You can also specify custom options which will be added to the alert’s <span> tag.

<%= icon :user, library: :font_awesome, class: 'fa-2x', id: 'icon', data: {value: 1} %>

displays the User icon from the Font Awesome library:

<span class="fa-2x fa fa-user" id="icon" data-value="1"></span>
Note: you must load the Font Awesome CSS in order to see Font Awesome icons. See the font_awesome_css helper for details.

Buttons

Use the button helper to display Bootstrap-styled buttons.

Basic buttons

Use button without options to display a button with the given caption.

<%= button 'Menu' %>

generates the following HTML:

<button class="btn btn-default">Menu</button>

Contextual buttons

Use button with the :context option to change the color (and semantic context) of the toggle button.

Available contexts are :default (default), :primary, :success, :info, :warning, :danger and :link.

<%= button 'Menu', context: :info %>

displays an info (blue background) button:

<button class="btn btn-info">Menu</button>

Custom-sized buttons

Use button with the :size option to change the size of the button.

<%= button 'Menu', size: :large %>

displays a large button:

<button class="btn btn-default btn-lg">Menu</button>

Block-level buttons

Use button with the layout: :block option to display a button that spans the full width of the parent.

<%= button 'Menu', layout: :block %>

displays an block button:

<button class="btn btn-default btn-block">Menu</button>

Complex buttons

To include HTML tags or a long text in the button, pass the caption as a block.

You can also specify custom options which will be added to the <button> tag.

<%= button context: :warning, id: 'button', class: :en, data: {js: 1} do %>
  Your <em>personal</em> menu
<% end %>

generates the following HTML:

<button id="button" class="en btn btn-warning" data-js="1">
  Your <em>personal</em> menu
</button>

Single-button forms

Use the button_to helper to display Bootstrap-styled single-button forms.

In Rails apps, ActionView provides the button_to helper which displays a single-button form (see Rails doc).

In Padrino and Middleman apps, Padrino::Helpers provides the button_to helper with the same purpose (see Padrino doc).

Bh overrides these methods to add Bootstrap styles only if they are invoked with any of the :context, :size or :layout options.

These options are used to display a Bootstrap-styled button (see the button helper for more details).
Any extra option is passed to the original method.

When used inside nav, button_to wraps the button in a <li> item (similar to what link_to does).

Rails example

<%= button_to 'New', '#new', class: 'b', form_class: 'f', method: :get, context: :primary %>

generates the following HTML:

<form class="f" method="get" action="#new">
  <input class="b btn btn-primary" type="submit" value="New">
</form>

Padrino/Middleman example

<%= button_to 'New', '#new', submit_options: {class: 'b'}, class: 'f', context: :primary %>

generates the following HTML:

<form action="#new" accept-charset="UTF-8" class="f" method="post">
  <input type="submit" value="New" class="b btn btn-primary">
</form>

Links

Use the link_to helper to display Bootstrap-styled links.

In Rails apps, ActionView provides the link_to helper which displays a link (see Rails doc).

In Padrino and Middleman apps, Padrino::Helpers provides the link_to helper with the same purpose (see Padrino doc).

Bh overrides these methods to add Bootstrap styles only if they are used inside alert_box, dropdown, nav or navbar:

  • when used inside alert_box, adds class="alert-link" to the <a> tag.
  • when used inside dropdown, adds role="menuitem" tabindex="-1" to the <a> tag and wraps the link in a <li role="presentation"> item.
  • when used inside nav, wraps the link in a <li> item or in a <li class="active"> if the link is to the current page.
  • when used inside the vertical section of navbar, adds class="navbar-brand" to the <a> tag.

Look at the examples of each one of these helpers in this page to see what the generated HTML looks like.

Forms (Rails only)

Use the form_for helper to display Bootstrap-styled forms.

In Rails apps, ActionView provides the form_for helper which displays model-specific forms (see Rails doc).

In Padrino and Middleman apps, Padrino::Helpers provides the form_for helper with the same purpose (see Padrino doc).

Bh overrides these methods to add Bootstrap styles only when used in Rails apps and:

  • if the :layout option is set, or
  • if the form is wrapped in a navbar.

Otherwise, the original form_for method is used.

Basic forms

Use form_for with layout: :basic to add Bootstrap style to the form elements.

<%= form_for User.new, layout: :basic do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me, checked: true %>
  <%= f.submit 'Sign in' %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users/new" method="post" role="form">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
  </div>
  <div class="form-group">
    <div class="checkbox">
      <input name="user[remember_me]" type="hidden" value="0">
      <label>
        <input checked="checked" name="user[remember_me]" type="checkbox" value="1"> Remember me
      </label>
    </div>
  </div>
  <input class="btn btn-primary" name="commit" type="submit" value="Sign in">
</form>

Horizontal forms

Use form_for with layout: :horizontal to align labels and groups of form controls in a horizontal layout.

<%= form_for User.new, layout: :horizontal do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me, checked: true %>
  <%= f.submit 'Sign in' %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_email">Email</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_password">Password</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">
        <label>
          <input name="user[remember_me]" type="hidden" value="0"><input checked="checked" id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <input class="btn btn-primary" name="commit" type="submit" value="Sign in">
    </div>
  </div>
</form>

Inline forms

Use form_for with layout: :inline for left-aligned and inline-block controls.

<%= form_for User.new, layout: :inline do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me, checked: true %>
  <%= f.submit 'Sign in' %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users/new" class="form-inline" method="post" role="form">
  <div class="form-group">
    <label class="sr-only" for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
  </div>
  <div class="form-group">
    <div class="checkbox">
      <input name="user[remember_me]" type="hidden" value="0">
      <label>
        <input checked="checked" name="user[remember_me]" type="checkbox" value="1"> Remember me
      </label>
    </div>
  </div>
  <input class="btn btn-primary" name="commit" type="submit" value="Sign in">
</form>

Navbar forms

Use form_for inside a navbar block for left-aligned and inline-block controls, optimized for a navbar. Setting the :layout option is not required.

<%= navbar do %>
  <%= vertical do %>
    <%= form_for User.new do |f| %>
    <%= f.email_field :email %>
      <%= f.submit 'Sign in' %>
    <% end %>
  <% end %>
<% end %>

generates the following HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#navbar-collapse-4818" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <form role="form" class="navbar-form" id="new_user" action="/users/new" accept-charset="UTF-8" method="post">
        <input name="utf8" type="hidden" value="✓">
        <input type="hidden" name="authenticity_token" value="2FT47">
        <div class="form-group">
          <label class="sr-only" for="user_email">Email</label>
          <input placeholder="Email" class="form-control" type="email" name="user[email]" id="user_email">
        </div>
        <input type="submit" name="commit" value="Sign in" class="btn btn-primary">
      </form>
    </div>
  </div>
</nav>

Labels

Field helpers inside bootstrapped forms are automatically displayed with their relative label. Use the :label option if you need to customize the generated label.

<%= form_for User.new, layout: :horizontal do |f| %>
  <%= f.email_field :email, label: 'Your e-mail' %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me, label: 'Remember?' %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_email">Your e-mail</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_password">Password</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <div class="checkbox">
        <input name="user[remember_me]" type="hidden" value="0">
        <label>
          <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember?</label>
      </div>
    </div>
  </div>
</form>

Set the :use_label option false if you do not need a label.

<%= form_for User.new, layout: :basic do |f| %>
  <%= f.email_field :email, use_label: false %>
  <%= f.password_field :password, use_label: false %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users/new" method="post" role="form" id="new_user" >
  <div class="form-group">
    <input class="form-control" id="user_email" name="user[email]" placeholder="Email" type="email">
  </div>
  <div class="form-group">
    <input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password">
  </div>
</form>

Placeholders

Field helpers inside bootstrapped forms are automatically displayed with their label as a placeholder. Use the :placeholder option if you need to customize the generated placeholder.

<%= form_for User.new, layout: :horizontal do |f| %>
  <%= f.email_field :email, placeholder: '' %>
  <%= f.password_field :password, placeholder: 'At least 8 characters' %>
<% end %>

generates the following HTML:

<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_email">Email</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_email" name="user[email]" placeholder="" size="30" type="email">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_password">Password</label>
    <div class="col-sm-9">
      <input class="form-control" id="user_password" name="user[password]" placeholder="At least 8 characters" size="30" type="password">
    </div>
  </div>
</form>

Input groups

Field helpers inside bootstrapped forms accept the :prefix and :suffix options. Their values are displayed before/after the field as input groups.

<%= form_for User.new, layout: :horizontal do |f| %>
  <%= f.email_field :email, prefix: '@' %>
  <%= f.telephone_field :phone, suffix: '☏' %>
<% end %>

generates the following HTML:

@
☏ 
<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_email">Email</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label" for="user_phone">Phone</label>
    <div class="col-sm-9">
      <div class="input-group">
        <input class="form-control" id="user_phone" name="user[phone]" placeholder="Phone" size="30" type="tel">
        <span class="input-group-addon">☏</span>
      </div>
    </div>
  </div>
</form>

Errors

Fields inside bootstrapped forms submitted with invalid values are automatically highlighted.

<%= form_for User.new, layout: :horizontal, do |f| %>
  <%= f.email_field :email %>
  <%= f.submit 'Sign up' %>
<% end %>

generates a form that shows error states, messages and icons when submitted with invalid values:

can't be blank 
<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group has-error has-feedback">
    <div class="field_with_errors">
      <label class="col-sm-3 control-label" for="user_email">Email</label>
    </div>
    <div class="col-sm-9">
      <div class="field_with_errors">
        <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email" value="">
      </div>
      <span class="form-control-feedback glyphicon glyphicon-remove"></span>
      <span class="help-block text-left">can't be blank</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <input class="btn btn-primary" name="commit" type="submit" value="Sign up">
    </div>
  </div>
</form>

Use the :errors option to customize the feedback to show on invalid fields.

<%= form_for User.new, layout: :horizontal, errors: {icons: false, messages: false} do |f| %>
  <%= f.email_field :email %>
  <%= f.submit 'Sign up' %>
<% end %>

generates a form that shows error states, messages and icons when submitted with invalid values: 

<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <div class="form-group has-error">
    <div class="field_with_errors">
      <label class="col-sm-3 control-label" for="user_email">Email</label>
    </div>
    <div class="col-sm-9">
      <div class="field_with_errors">
        <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email" value="">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <input class="btn btn-primary" name="commit" type="submit" value="Sign up">
    </div>
  </div>
</form>

Help text

Use the :help option to display a help message after fields inside bootstrapped forms.

Note that error messages will have precedence over help messages.

<%= form_for User.new, url: '/', method: :get, layout: :basic do |f| %>
  <%= f.email_field :email, label: 'E-mail address', help: 'We will send a confirmation email' %>
  <%= f.password_field :password, placeholder: 'Your Password', help: 'Do not use "password"' %>
  <%= f.file_field :avatar, help: 'Suggested dimension: 50x50 px.' %>
  <%= f.check_box :confirm, checked: true, help: 'We will not share your data with anyone' %>
  <%= f.submit 'Sign in' %>
<% end %>

generates a form that shows a help message after each field:

We will send a confirmation email
Do not use "password"
Suggested dimension: 50x50 px.
We will not share your data with anyone 
<form role="form" class="" id="new_user" enctype="multipart/form-data" action="/" accept-charset="UTF-8" method="get">
  <input name="utf8" type="hidden" value="✓">
  <div class="form-group">
    <label for="user_email">E-mail address</label>
    <input placeholder="Email" class="form-control" type="email" name="user[email]" id="user_email">
    <span class="help-block text-left">We will send a confirmation email</span>
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input placeholder="Your Password" class="form-control" type="password" name="user[password]" id="user_password">
    <span class="help-block text-left">Do not use "password"</span>
  </div>
  <div class="form-group">
    <label for="user_avatar">Avatar</label>
    <input type="file" name="user[avatar]" id="user_avatar">
    <span class="help-block text-left">Suggested dimension: 50x50 px.</span>
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label>
        <input name="user[confirm]" type="hidden" value="0">
        <input offset="true" label="Confirm" type="checkbox" value="1" checked="checked" name="user[confirm]" id="user_confirm">
        Confirm
      </label>
    </div>
    <span class="help-block text-left">We will not share your data with anyone</span>
  </div>
  <input type="submit" name="commit" value="Sign in" class="btn btn-primary">
</form>

Fieldsets

Use the fieldset helper to group sets of related fields in a panel with an optional title.

<%= form_for User.new, layout: :horizontal, do |f| %>
  <%= f.fieldset do %>
    <%= f.email_field :email %>
    <%= f.password_field :password %>
  <% end %>
  <%= f.fieldset 'Optional data' do %>
    <%= f.phone_field :phone %>
    <%= f.url_field :website %>
  <% end %>
<% end %>

generates a form with two fieldsets, one of them with a title:

Optional data
<form accept-charset="UTF-8" action="/users" class="form-horizontal" method="post" role="form">
  <fieldset class="panel panel-default">
    <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-3 control-label" for="user_email">Email</label>
        <div class="col-sm-9">
          <input class="form-control" id="user_email" name="user[email]" placeholder="Email" size="30" type="email">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label" for="user_password">Password</label>
        <div class="col-sm-9">
          <input class="form-control" id="user_password" name="user[password]" placeholder="Password" size="30" type="password">
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset class="panel panel-default">
    <div class="panel-heading">Optional data</div>
    <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-3 control-label" for="user_phone">Phone</label>
        <div class="col-sm-9">
          <input class="form-control" id="user_phone" name="user[phone]" placeholder="Email" size="30" type="tel">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label" for="user_website">Website</label>
        <div class="col-sm-9">
          <input class="form-control" id="user_website" name="user[website]" placeholder="Password" size="30" type="url">
        </div>
      </div>
    </div>
  </fieldset>
</form>

Bootstrap CDN

Use the CDN helpers to load Bootstrap stylesheets and javascript files from MaxCDN.

Bootstrap CSS file

Use bootstrap_css without options to get the URL of the most up-to-date Bootstrap CSS file.

<%= stylesheet_link_tag bootstrap_css %>

generates the following HTML code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />

Bootstrap Theme CSS

Use bootstrap_theme_css without options to get the URL of the most up-to-date Bootstrap Theme CSS file.

<%= stylesheet_link_tag bootstrap_theme_css %>

generates the following HTML code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css" />

Font Awesome CSS

Use font_awesome_css without options to get the URL of the most up-to-date Font Awesome CSS file.

<%= stylesheet_link_tag font_awesome_css %>

generates the following HTML code:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />

Bootstrap JS

Use bootstrap_js without options to get the URL of the most up-to-date Bootstrap JS file.

<%= javascript_include_tag bootstrap_js %>

generates the following HTML code:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>

Older versions

Use the :version option to get the URL of a specific version of an asset.

<%= stylesheet_link_tag(bootstrap_css version: '3.1.0') %>

generates the following HTML code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />

Non-minified

Use the :minified option to get the non-minified version of an asset.

<%= javascript_include_tag bootstrap_js(minified: false) %>

generates the following HTML code:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.js" type="text/javascript"></script>

URI scheme

Use the :scheme option to get either the HTTP or HTTPS version of the URL for Bootstrap CSS.

<%= stylesheet_link_tag(bootstrap_theme_css schema: 'https') %>

generates the following HTML code:

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css" />