simple form bootstrap horizontal and inline

Question

I'm working with simple_form + bootstrap, but wanted to know whether it was possible to make some of the fields go inline and others under the label in the same form.

I would potentially like to even make a form into two columns or more.

Is there a way to achieve this through either wrappers or maybe through a different form builder or styling?

Thank you!

Solution

The solution that I have found includes using the 'row' and 'span' classes provided by bootstrap and inserting them into the various fields using the 'wrapper_html' provided by simple form.

Example:

.container
    ...
    = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f|
      = f.error_notification

      .form-inputs.row
        = f.input :name, :wrapper_html => { :class => 'span6' }
        = f.input :contact_name, :wrapper_html => { :class => 'span6' }

      .form-inputs.row
        = f.input :contact_email, :wrapper_html => { :class => 'span6' }
        = f.input :contact_phone, :as => :string, :wrapper_html => { :class => 'span6' }

You can read up in the Docs about bootstraps grid system: http://twitter.github.com/bootstrap/scaffolding.html

Or check out some examples of bootstrap and simple form integration: http://simple-form-bootstrap.plataformatec.com.br/articles/new

Hope that helps!

Comments

[fatfrog]

simple form link integration link is broken