Alex Rivera | Logout

Twitter Bootstrap - Inline Checkbox Alignment issue

Asked 2013-04-12T16:02:24.023
28

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:

enter image description here

Any ideas?

css twitter-bootstrap
Edit
Report

1 Answer

49

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;
}
answered 2013-05-30T17:11:27.210

Your Answer