CODEWITHSUNDEEP
csstwitter-bootstrap
Raoot
Raoot

Reputation: 1771

Twitter Bootstrap - Inline Checkbox Alignment issue

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?

Upvotes: 28

Views: 47735

Answers (4)

noel
noel

Reputation: 2145

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

Upvotes: 49

Rafael Sales
Rafael Sales

Reputation: 336

Wrapping each label+input in an <li> fixes the margin-left alignment issue with no CSS override/customization

<ul>
  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 1
    </label>
  </li>

  <li>
    <label class="checkbox-inline">
      <input type="checkbox" value="option1"> Option 2
    </label>
  </li>
</ul>

Upvotes: -1

Rudey
Rudey

Reputation: 4975

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

Upvotes: 12

EpokK
EpokK

Reputation: 38092

Remove inline Class on your label element.

Upvotes: -3

Related Questions