Twitter Bootstrap - checkbox columns / columns within form

Question

I have a form field which has a number of checkboxes - how can I display the checkboxes as 3 columns instead of 1?

Something similar to this:

enter image description here

I've tried adding a row/span divs inside the <div class="controls"> but it seems to be adding a left padding.

I know there is the inline checkbox example in the docs but elements aren't aligned.

Andres I Perez · Accepted Answer · 2013-10-26 16:31:50Z

38

You can achieve such a setup by separating the checkbox blocks within the .control-group container instead of each .control container like so:

<div class="control-group">
    <p class="pull-left">Payment Types</p>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Cash
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> Invoice
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Discover
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Financing
        </label>
    </div>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Check
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> American Express
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> MasterCard
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Google Checkout
        </label>
    </div>
    <div class="controls span2">
        <label class="checkbox">
            <input type="checkbox" value="option1" id="inlineCheckbox1"> Traveler's Check
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option2" id="inlineCheckbox2"> Diner's Club
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Visa
        </label>
        <label class="checkbox">
            <input type="checkbox" value="option3" id="inlineCheckbox3"> Paypal
        </label>
    </div>
</div>

Demo: http://jsfiddle.net/LVFzK/468/show/

edited Oct 26, 2013 at 16:31

answered Jun 5, 2012 at 0:31

Andres I Perez

75.5k21 gold badges159 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

RS7 Over a year ago

Andres, it seems that .form-horizontal causes the .controls to have a left padding. What do you suggest?

Andres I Perez Over a year ago

@RS7 you can use the .form-vertical class instead, which is not required per documentation. Demo: jsfiddle.net/LVFzK/1

Andres I Perez Over a year ago

@RS7 a dirtier approach would be to overwrite that margin-left with an id on the form like so: jsfiddle.net/LVFzK/2, i created a #form-custom id and added it to the form container and then targeted the .control class to remove that 160px that it adds, i resetted it to the default 20px from the grid.

codecowboy Over a year ago

@AndresIlich the checkboxes in your demo jsfiddle.net/LVFzK do not line up in columns. Am I missing something?

Andres I Perez Over a year ago

@codecowboy I used the stylesheet from the bootstrap's site which has changed since this answer was written. Here is an updated fiddle with a working stylesheet: jsfiddle.net/LVFzK/468/show

|

Collectives™ on Stack Overflow

Twitter Bootstrap - checkbox columns / columns within form

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related