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" > × </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: Open the Gemfile file of your Rails, Padrino or Middleman project and add the line gem 'bh', '~> 1.2' . only if you are using Middleman: open config.rb and add activate :bh . 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: You accepted the Terms of service. <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: × Close You accepted the Terms of service. <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: You accepted the Terms of service. <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: × Close Thanks! You accepted the Thanks! You accepted the Terms of service <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: You accepted the Terms of service. <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. Basic 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): Modal × Close Modal Do what you want! <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> Custom-sized modals 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: Modal × Close Modal Do what you want! <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> Modals with custom title 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: Terms of service × Close Terms of service Do what you want! <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> Modals with custom button caption 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: Click me! × Close Modal Do what you want! <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> Modals with custom button context 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: Terms of service × Close Terms of service Do what you want! <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> Modals with custom button size 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: Modal × Close Modal Do what you want! <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> Complex modals 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: Terms of service × Close Terms of service Please accept the Terms of service. <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: Home

Users

Profile <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: Home

Users

Profile <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: Home

Users

Profile <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: Home

Users

Profile <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: Home

Users

Profile <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>

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. Basic 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): Menu Home

Users

Profile <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> Right-aligned dropdowns 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: Menu Home

Users

Profile <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> Grouped dropdowns 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: Menu Home

Users Profile Edit Profile <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> Dropups 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: Menu Home

Users

Profile <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> Dropdown with custom button context 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: Menu Home

Users <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> Dropdowns with custom button size 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: Menu Home

Users <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> Dropdowns with split button 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: Menu Toggle Dropdown Home

Users

Profile <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> Complex dropdowns 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: Menu Toggle Dropdown Home

Profile <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 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: Menu <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: Menu <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: Menu <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: Menu <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: Your personal menu <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>

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.

, adds to the tag. when used inside dropdown , adds role="menuitem" tabindex="-1" to the <a> tag and wraps the link in a <li role="presentation"> item.

, adds to the tag and wraps the link in a 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.

, wraps the link in a item or in a 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

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: Email Password Remember me <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: Email Password Remember me <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: Email Password Remember me <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> 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: Your e-mail Password Remember? <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: Email Password <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: Email @ Phone ☏ <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: Email 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: Email <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: E-mail address We will send a confirmation email Password Do not use "password" Avatar Suggested dimension: 50x50 px. Confirm 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: Email Password Optional data Phone Website <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>