Nest all of your checkboxes inside one div with the class row.
Nest each of your checkboxes inside its own div with the class col-xs-4.
Hope this helps you.
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>
Imagine, if you will, a class that creates a row… within that class you will put columns… just as a row in a table will have columns taking up it’s width
The class that creates a row is conveniently labelled ‘row’… and each of the classes within that that row will be labelled with class ‘column’. And labelled with how big it is related to cutting up a page into 12 columns. that’s what the 4 represents… the xs represent extra-small… you can have several values here to represent a large device. medium (md), small etc…
The 4 means 4 of 12 (or 1/3rd of a page… and low and behold you are using 3 checkboxes… each will take up a third of a page within a ‘row’, so this makes some kind of sense when seen that way).
Divs’s will act as the ‘boxes’ that wrap around these things you are creating. And the things you are creating is a nice grid on a page to lay things out besides each other when their usual CSS rules makes lining them up in a grid much more difficult. hence the power of Bootstrap.
Practically… you end up with something like this (I am simplifying, as the code is given above)
<div 'row'>
<div 'col-4'>
checkbox
</div>
<div 'col-4'>
checkbox
</div>
<div 'col-4'>
checkbox
</div>
</div> <!-- this is the 'closing div of the 'row'... 'wrapped around everything' -->
There are some really great visual examples of what the grid looks like with the xs md etc here:
1 Like