How to center bootstrap checkbox form
18,888
Solution 1
How about something like this? https://jsfiddle.net/sxh0n7d1/20/
since bootstrap rows are in a 12 column grid, I checkboxes to span 2 columns each, and moved the 4 columns to the right by 4.
<div class="row checkbox-row">
<div class="col-xs-2 col-xs-offset-4">
<div class="checkbox-inline">
<label class="checkbox-inline">
<input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div class="col-xs-2">
<div class="checkbox-inline">
<label class="checkbox-inline">
<input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
Solution 2
Try this
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline" style="text-align:center;">
<label class="checkbox-inline"><input type="checkbox" value="">Adult News</label>
</div>
</div>
<div class="row checkbox-row">
<div class="col-sm-6">
<div class="checkbox-inline" style="text-align:center;">
<label class="checkbox-inline"><input type="checkbox" value="">Youth News</label>
</div>
</div>
</div>
</div>
Related videos on Youtube
Author by
Pablo Vera
Updated on June 04, 2022Comments
-
Pablo Vera almost 2 years
I need to center this checkboxes Could anybody help me center this checkboxes? i've try so many things already.
here's my code:
<div class="row checkbox-row"> <div class="col-sm-6"> <div class="checkbox-inline"> <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label> </div> </div> <div class="row checkbox-row"> <div class="col-sm-6"> <div class="checkbox-inline"> <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label> </div> </div> </div> </div>
-
Pablo Vera over 7 yearsThank you! I used your code, gave the checkboxes some width with css and they got placed where I wanted them!