Bootstrap shape - horizontal vertical alignment of checkboxes without label text

Question

This morning I changed from Bootstrap 3.0.0 to 3.2.0 because I need some new features for my web application. Everything seemed to work as expected until I noticed a problem with vertically aligning .form-horizontal in .form-horizontal form.

An example is available at http://www.bootply.com/AYN64feYze . The markup for this minimal 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 the flag does not have the following text, it moves below the line in which it should appear.

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

Thank you for your help.

Answer 1

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

 label{ display:inline; } 

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

Answer 2

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. Then I made the following changes to the checkmark label element:

• Put a label in your own column div <div class="col-lg-3"></div>
• Remove control label class = "
• Add class = "pull-right".

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

Answer 3

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

 <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 seemed to work in your Bootply when I tried it.

And remember, if you have a shortcut to use the for attribute to read from the screen and make it easier for your users (they can just click the label instead of this check box).