Twitter Bootstrap - Inline Checkbox Alignment issue

css, twitter-bootstrap

Solution

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;
}

Problem

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?

Original source