Twitter Bootstrap - Inline Checkbox Alignment issue

Question

Driving myself crazy trying to figure this one out. I can't seem to get the checkboxes that wrap to the next line to left align properly.

Here's some sample code:

<label class="checkbox inline">   <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa </label> <label class="checkbox inline">   <input type="checkbox" id="inlineCheckbox2" value="option2"> Bbbbbbb </label> <label class="checkbox inline">   <input type="checkbox" id="inlineCheckbox3" value="option3"> Cccccccccccccc </label> <label class="checkbox inline">       <input type="checkbox" id="inlineCheckbox1" value="option1"> Ddddddddd </label> <label class="checkbox inline">   <input type="checkbox" id="inlineCheckbox2" value="option2"> Eeeeeeeee </label> <label class="checkbox inline">   <input type="checkbox" id="inlineCheckbox3" value="option3"> Ffffffffffff </label> 

And here's the result:

Any ideas?

Answer 1

You can override the Bootstrap 2 class by adding a no_indent class (or whatever):

<label class="checkbox inline no_indent">   <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa </label> 

and adding this to your CSS:

.checkbox.inline.no_indent, .checkbox.inline.no_indent+.checkbox.inline.no_indent {   margin-left: 0;   margin-right: 10px; } .checkbox.inline.no_indent:last-child {   margin-right: 0; } 

Bootstrap 3: The checkbox inline classes have been reduced to a single checkbox-inline class. The HTML becomes:

<label class="checkbox-inline no_indent">   <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa </label> 

CSS:

.checkbox-inline.no_indent, .checkbox-inline.no_indent+.checkbox-inline.no_indent {   margin-left: 0;   margin-right: 10px; } .checkbox-inline.no_indent:last-child {   margin-right: 0; } 

Bootstrap 4: The checkbox-inline class is now form-check-inline:

<label class="form-check-inline no_indent">   <input type="checkbox" id="inlineCheckbox1" value="option1"> Aaaaaaaaaa </label> 

CSS:

.form-check-inline.no_indent, .form-check-inline.no_indent+.checkbox-inline.no_indent {   margin-left: 0;   margin-right: 10px; } .form-check-inline.no_indent:last-child {   margin-right: 0; } 

Answer 2

Here's a complete Bootstrap 3 solution that also fixes the same issue for radio buttons, without having to use a seperate class:

.checkbox-inline, .checkbox-inline + .checkbox-inline, .checkbox-inline + .radio-inline, .radio-inline, .radio-inline + .radio-inline, .radio-inline + .checkbox-inline {     margin-left: 0;     margin-right: 10px; }  .checkbox-inline:last-child, .radio-inline:last-child {     margin-right: 0; }