Skip to content

A rails form builder that makes it super easy to create beautiful-looking forms with Twitter Bootstrap 2.0

License

Notifications You must be signed in to change notification settings

Leadformance/bootstrap_form

 
 

Repository files navigation

bootstrap_form

bootstrap_form is a rails form builder that makes it super easy to create beautiful-looking forms using Twitter Bootstrap 2.0

Requirements

Installation

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.

Usage

<%= 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 %>

Example Form

Options

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:

Example Form

Validation Errors

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.

Example form with errors

Credits

Inspired by Ryan Bates' Form Builder Railscast

bootstrap_form is Copyright (c) 2012 Stephen Potenza and is distributed under the MIT license.

About

A rails form builder that makes it super easy to create beautiful-looking forms with Twitter Bootstrap 2.0

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Ruby 99.0%
  • JavaScript 1.0%