Bootstrap + simple checkbox grids form

Question

I have a list of 20+ tags that I want to present in a four-unit cell, but I'm not quite sure what the cleanest way to do this. I have the following form:

= simple_form_for(@fracture) do |f| = f.error_notification .form-inputs = f.input :title = f.input :summary = f.input :tag_list, :as => :check_boxes, :collection => ActsAsTaggableOn::Tag.all.map(&:name), :item_wrapper_class => 'inline' 

The resulting form should look something like this: http://jsfiddle.net/LVFzK/ , but I would like the logic to be limited to wrapper or CSS, and not manually HTML.

Answer 1

If you get rid of the elements of the <div class="controls span2"> column and add the span2 class to the label elements, the label will have the specified width and will float to the left. This will align the checkboxes to the grid.

 <label class="checkbox span2"> <input type="checkbox" value="option1"> Cash </label> 

You can make the grid be four columns by adding the span10 class to the container element:

 <div class="control-group span10"> 

However, this will cause the grid to flow left → right, and then create new lines instead of consecutive elements that will be stacked vertically. The only way I can think that elements arranged vertically is to use multi-column layout layout . I haven't used this before, and I really don't know how well it works in different browsers.

This jsFiddle shows two approaches, each of which has either a static width or a liquid width.