CODEWITHSUNDEEP
twitter-bootstrap
RS7
RS7

Reputation: 2361

Twitter Bootstrap - checkbox columns / columns within form

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.

Upvotes: 20

Views: 72633

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75409

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/

Upvotes: 38

Related Questions