Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 253
icodes Avatar asked Aug 14 '15 07:08

icodes


2 Answers

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)
}
like image 152
Pixelomo Avatar answered Oct 09 '22 09:10

Pixelomo


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/

like image 43
Nimeshka Srimal Avatar answered Oct 09 '22 07:10

Nimeshka Srimal