Grouping checkboxes for individual boolean values using css, twitter-bootstrap, and simple_form

Question

Can you please help me format this simple_form?

I am using this form:

<%= simple_form_for @my_model, :html => { :class => 'form-horizontal'} do |f| %>
<%= f.error_notification %>
    <div class="form-inputs">
      <%= f.input :some_text, :input_html => {:class => "span6", :rows => 2}%>
      <%= f.input :a_description, :input_html => {:class => "span6", :rows => 2}%>  
      <%= f.input :boolean1%>
      <%= f.input :boolean2%>
      <%= f.input :boolean3%>
      <%= f.input :boolean4%>
      <%= f.input :boolean5%>
      <%= f.input :boolean6%>
      <%= f.input :boolean7%>
      <%= f.input :boolean8%>
      <%= f.input :id, :as => :hidden, :input_html => { :value => @my_model.id }%>
  </div>
  <div class="form-actions">
    <%= f.button :submit, :class => 'btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                special_path, :class => 'btn' %>
  </div>
<% end %>

I'd like to display the boolean values as two columns of checkboxes, each vertically stacked with 4 checkboxes in each column.

something like

Some text:      [input]
A description:  [input] 
                bool1    bool5
                bool2    bool6
                bool3    bool7
                bool4    bool8

I've cloned the git repository here http://simple-form-bootstrap.plataformatec.com.br/articles/new, looked at the code, ran it, and I see it works.
But... it works for a series of checkbox options that get stored in a string. I have a model with 8 boolean values and can't understand how to properly group them in a form using rails, css, twitter-bootstrap, and simple_form.

I've read this SO post: Make all input fields on the same line
... and this one: Adding controls inline with simple_form, nested_form and Twitter Bootstrap in Rails

... but they don't seem to fit my particular situation and I am out of ideas to try.

Please try to focus your answer on a specific code example that shows how to layout checkboxes for individual boolean values in some sort of a grouped fashion.

Thanks in advance!

Luke Luke · Accepted Answer · 2012-10-23T23:21:16

I've made multi column bootstrap forms in the past by just using the normal grid controls. In your case, something like:

<div class="form-inputs">
  ...
  <div class="row">
    <div class="span6">
      <%= f.input :boolean1 %>
      <%= f.input :boolean2 %>
      ...
    </div>
    <div class="span6">
      <%= f.input :boolean5 %>
      <%= f.input :boolean6 %>
      ...
    </div>
  </div>
  ...
</div>

Then you can tweak those columns however you want by using the different span and offset classes.

Grouping checkboxes for individual boolean values using css, twitter-bootstrap, and simple_form

1 Answers