Simple bootstrap form horizontal and integrated

Question

I work with simple_form + bootstrap, but I wanted to know if it is possible to make some of the fields strict and others under the label in the same form.

I would even like to create a form with two or more columns.

Is there a way to achieve this through wrappers or perhaps through another form constructor or style?

Thanks!

Answer 1

The solution I found involves using the "row" and "span" classes provided by bootstrap and pasting them into various fields using the "wrapper_html" provided by a 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 in the Docs on the bootstrap system system: http://twitter.github.com/bootstrap/scaffolding.html

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

Hope this helps!

Answer 2

You can always arrange the fields to your liking by changing the style of the form elements. See any of the google search results from the two column layouts. For example - this

Answer 3

You can also add a field to the wrapper (worked for me):

  .container ... = simple_form_for(@stuff, :html => { :class => 'form-horizontal' }) do |f| = f.error_notification = f.input :postal_code, :label => 'Postal code, house number', :wrapper => :append do = f.input_field :postal_code = f.input_field :street_number