Need help with twitter_bootstrap_form_for?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

stouset
416 Stars 111 Forks MIT License 155 Commits 19 Opened issues

Description

A Rails FormBuilder DSL for generating Twitter Bootstrap forms

Services available

!
?

Need anything else?

Contributors list

# 74,442
Ruby
Rust
pairing
sudo
119 commits
# 209,352
Ruby
Shell
Groovy
forge
4 commits
# 221,744
Ruby
Shell
HTML
1 commit
# 21,879
Rails
rubygem
rspec
iterm2
1 commit
# 225,071
HTML
chef-re...
nginx
CSS
1 commit
# 69,203
Go
Shell
activit...
Rails
1 commit

Twitter Bootstrap Form For

WARNING! This is for Rails 4 and Bootstrap 3 (current in RC).

twitter_bootstrap_form_for
is a Rails FormBuilder DSL that, like Formtastic, makes it easier to create semantically awesome, readily-stylable, and wonderfully accessible HTML forms in your Rails applications. It abides by the markup expectations of Twitter Bootstrap, make your forms look great right out of the box.

However, it also tries not to do too much. Rather than try to guess at input types and provide an exhaustive set of options for each tag helper (as Formtastic does), it only lightly wraps the existing Rails form tag helpers.

Dependencies

  • Rails 4
  • Bootstrap-sass, pull from branch 3 off github

    gem 'bootstrap-sass', :git => 'git://github.com/thomas-mcdonald/bootstrap-sass.git', :branch => '3'

Syntax

= twitter_bootstrap_form_for @user, layout: 'vertical (default) OR horizontal OR inline', default_div_class: 'col-lg-10 (default)', role: 'form (default)' do |user|

/ wraps a section in a fieldset with the provided legend text = user.inputs 'Sign up', :class => 'sign_up' do

/ generates a standard email field; also showing overriding the div_class around the input element on a horizontal form
= user.email_field :email, :placeholder => '[email protected]', div_class: 'col-md-6'

/ generates a password field with a descriptive aside
= user.password_field :password do
  %span.help-block
    Must be no larger than 6 characters<br>
    Must contain only the letters 'x' or 'p'

/ a field with a custom label
= user.password_field :password_confirmation, 'Confirm Password'

/ input fields with custom add-ons
= user.text_field :twitter_id, 'Twitter', :class =&gt; 'medium', :add_on =&gt; :prepend do
  %span.add-on @

/ select fields now have the second parameter as a label
= user.date_select :born_on, 'Born on', {}, :class =&gt; 'small'

/ inline inputs are not automatically labeled
= user.inline 'Interests' do |inline|
  #{inline.text_field :interest_1, :class =&gt; 'small'},
  #{inline.text_field :interest_2, :class =&gt; 'small'}, and
  #{inline.text_field :interest_3, :class =&gt; 'small'}

/ group of radio buttons
= user.toggles 'Email Preferences' do
  = user.radio_button :email, 'HTML Email', :html, :checked =&gt; true
  = user.radio_button :email, 'Plain Text', :plain

/ group of checkboxes
= user.toggles 'Agreements' do
  = user.check_box :agree,   'I agree to the abusive Terms and Conditions'
  = user.check_box :spam,    'I agree to receive all sorts of spam'
  = user.check_box :spammer, 'I agree to let the site spam others through my Twitter account'

/ wraps buttons in a distinctive style = user.actions do = user.submit 'Sign up' = button_tag 'Cancel', :type => 'reset', :class => 'btn'

That code produces the following output, with no custom stylesheets.

That's it. All of the Rails field helpers you know and love work just like their normal FormBuilder counterparts, but with minor extensions to expose the functionality anticipated by Twitter Bootstrap.

Form Helper Changes

The changes this

FormBuilder
effects to the existing Rails form helpers is simple:
  • the second parameter becomes the label (pass false to disable, nil for default)
  • the last options hash accepts an
    :add_on
    key
  • if a block is passed, the HTML it outputs is placed immediately after the input

Known Bugs

  • inline fields don't receive error markup (issue #28)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.