How to align text and checkbox using bootstrap3

Question

http://www.bootply.com/9WB3SixQNr

   <div class="form-group">
     <label class="col-sm-2 control-label">Text</label>
     <div class="col-sm-10">
       <div class="checkbox">
         <label class="checkbox-inline">
           <input id="123" name="Checkbox" value="a" type="checkbox">
         </label>
       </div>
     </div>
   </div>

The "Text" is not aligned with the checkbox. The checkbox is slightly below the Text. How do I make them both on the same line? The "Text" is not exactly a label, If I add a label after the input tag the alignment is okay(I see other questions with aligning the label and checkboxes, this is different). I want the "Text" to be display on the left correclty in line with checkbox.

http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers — Hearner, Aug 03 '15 at 14:29

score 1 · Accepted Answer · edited May 24 '17 at 15:05

You're not dealing with columns in bootstrap right.

This code worked for me :

<div class="container">
<form class="form-horizontal">

  <div class="form-group">
    <div class="col-sm-2 ">
      <label class="control-label">Text</label>
     </div>
     <div class="col-sm-10">
       <label class="checkbox checkbox-inline">
         <input id="123" name="Checkbox" value="a" type="checkbox">
       </label>
     </div>
  </div>

</form>
</div>

And this is the CSS to make the two elements inside the divs stick side by side :

.checkbox{
  float:left;
}
.control-label{
  float:right;
}

Here's a link for it : DEMO

Thanks. That with a small modification, I used label class instead of div for Text and didnot use css. — user5095359, Aug 03 '15 at 15:04

How to align text and checkbox using bootstrap3

1 Answers1