BootstrapForm

BootstrapForm is a form builder that makes it super easy to integrate Twitter Bootstrap-style forms into your Rails App.

Requirements

• Ruby 1.9+
• Rails 3, 4
• Twitter Bootstrap 3.0+

Installation

Add it to your Gemfile:

gem 'bootstrap_form'

Then:

bundle

Rails 3

Add this line to app/assets/stylesheets/application.css.scss:

/*
 *= require bootstrap_form
*/

Usage

To get started, just use the BootstrapForm form helper. Here's an example:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.submit "Create My Account" %>
<% end %>

Form Helpers

This gem wraps the following Rails form helpers:

• text_field
• password_field
• text_area
• file_field
• number_field
• email_field
• telephone_field / phone_field
• url_field
• select
• collection_select
• date_select
• time_select
• datetime_select
• check_box
• radio_button

Default Form Style

By default, your forms will stack labels on top of controls and your controls will grow to 100% of the available width.

Inline Forms

To use a inline-style form, use the style: :inline option. To hide labels, use the sr-only class, which keeps your forms accessible for those using Screen Readers.

<%= bootstrap_form_for(@user, style: :inline) do |f| %>
  <%= f.email_field :email, label_class: "sr-only" %>
  <%= f.password_field :password, label_class: "sr-only" %>
  <%= f.check_box :terms, label: "Remember Me" %>
  <%= f.submit "Create My Account" %>
<% end %>

Horizontal Forms

To use a horizontal-style form with labels to the left of the inputs, use the style: :horizontal option. You will need to specify both label and control widths.

<%= bootstrap_form_for(@user, style: horizontal) do |f| %>
  <%= f.email_field :email, label_class: "col-sm-2", wrap_control: "col-sm-10" %>
  <%= f.password_field :password, label_class: "col-sm-2", wrap_control: "col-sm-10" %>

  <%= f.form_group nil, wrap_content: "col-sm-offset-2 col-sm-10" do %>
    <%= f.submit "Create My Account" %>
  <% end %>
<% end %>

Code Triage page

http://www.codetriage.com/potenza/bootstrap_form

Contributors

https://github.com/potenza/bootstrap_form/graphs/contributors

License

MIT License. Copyright 2012-2013 Stephen Potenza (https://github.com/potenza)