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.
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)
}
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With