bootstrap_form is a rails form builder that makes it super easy to create beautiful-looking forms using Twitter Bootstrap 2.0
- Ruby 1.9+
- Rails 3.1+
- Twitter Bootstrap 2.0+ -- I use less-rails-bootstrap
Add the gem to your Gemfile
gem 'bootstrap_form'
Install the gem
bundle
Add bootstrap_form to your application.css file
/*
*= require bootstrap_form
*/
This brings in a couple of minor css classes that help format helper and error messages.
<%= bootstrap_form_for(@user) do |f| %>
...
<% end %>
This plugin provides the following form helpers:
-
text_field
-
text_area
-
password_field
-
select
-
collection_select
-
file_field
-
date_select
-
check_box
-
i18n_text_field
-
i18n_text_area
-
datetimer_picker
-
date_picker
-
time_picker
These form helpers accept the same options as the Rails form
helpers with the addition of two options label
and help
. Here's an
example form that also uses the actions
helper for the submit button:
<%= bootstrap_form_for(@user) do |f| %>
<%= f.alert_message "Please fix the errors below." %>
<%= f.text_field :email, autofocus: :true %>
<%= f.password_field :password, help: 'Must be at least 6 characters long' %>
<%= f.password_field :password_confirmation, label: 'Confirm Password' %>
<%= f.check_box :terms, label: 'I agree to the Terms of Service' %>
<%= f.actions do %>
<%= f.primary 'Sign Up', disable_with: 'Saving...' %>
<% end %>
<% end %>
To use a horizontal-style form with labels to the left of the inputs,
add the .form-horizontal
class:
<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }) do |f| %>
To place helper text underneath the fields, pass the option help: :block
:
<%= bootstrap_form_for(@user, help: block) do |f| %>
Here's an example of a horizontal-style form with block helpers:
When a validation error is triggered, the field will be outlined and the
error will be displayed next to the field. Rails normally wraps fields
in a div (field_with_errors), but this behavior is suppressed when bootstrap_form_for
is called.
Inspired by Ryan Bates' Form Builder Railscast
bootstrap_form is Copyright (c) 2012 Stephen Potenza and is distributed under the MIT license.