CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
iCodes
iCodes

Reputation: 1457

How to properly align checkbox and labels in bootstrap?

I have two rows of checkboxes and labels.Although horizontal alignment is not an issue , however there is a problem of vertical alignment of second column.How can I achieve a symmetry in this case?

<div class="form-inline">
<div class="form-group">
    <div class="col-md-4">
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
    </div>
    <div class="col-md-4">
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
    </div>
</div>

JSfiddle

As you can see the alignment of Moday and Friday (checkbox and label) is not proper.

Upvotes: 6

Views: 23914

Answers (3)

Nimeshka Srimal
Nimeshka Srimal

Reputation: 8950

What if you wrap each checkbox with a col-sm-3 box? 

<div class="col-sm-3">
    <label class="radio-inline">
    <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>

https://jsfiddle.net/hobs766o/1/

Upvotes: 4

Pixelomo
Pixelomo

Reputation: 6737

I've updated your fiddle with a fixed width on the wrapping div .col-md-4 and positioned the labels using float with the width of each label set to take 1/3 of the parents width using the calc function:

label{
    float: left; 
    width: calc(100%/3)
}

Upvotes: 7

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2131

JsFiddle DEMO

.col-md-4.first label {
    display: block;
    width: 99px;
    float: left;
}
.col-md-4.second label {
    display: block;
    width: 99px;
    float: left;
}

<div class="form-inline">
    <div class="form-group">
        <div class="col-md-4 first">
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
        </div>

<div style="clear:left"></div>

        <div class="col-md-4 second" style="
">
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
            <label class="radio-inline">
                <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions