Bootstrap form-horizontal vertical alignment of ch

Question

I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal form.

An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

If a checkbox has no following text it is shifted below the row it should appear in.

Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label> that contains the <input type="checkbox"> and use the background color as the font color to hide the text.

Thank you for your help.

Answer 1

This worked for me:

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>    

First, I had to remove the <div class='checkbox'> element. I then made the following changes to the checkbox label element:

1. Place the label in its own column div <div class="col-lg-3"></div>
2. Remove class="control-label"
3. Add class="pull-right".

I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.

Answer 2

If you don't need following text for the checkboxes, why not just remove the <label> surrounding the checkboxes. Like so.

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

This code appeared to work in your Bootply when I tried it.

And remember if you have a label to use the for attribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).

Answer 3

I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label> (currently set to inline-block) to:

label{
    display:inline;
}

Here's an updated Bootply. Hope this helps! Let me know if you have any questions.