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.

stackoverflow.com/questions/306252/…

Hearner
– Hearner

2015-08-03 14:29:59 +00:00
Commented Aug 3, 2015 at 14:29 — Hearner
– Hearner, Commented Aug 3, 2015 at 14:29
Here you have the css to do this

Hearner
– Hearner

2015-08-03 14:30:25 +00:00
Commented Aug 3, 2015 at 14:30 — Hearner
– Hearner, Commented Aug 3, 2015 at 14:30

davidkonrad · Accepted Answer · 2017-05-24 15:05:05Z

1

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

edited May 24, 2017 at 15:05

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

answered Aug 3, 2015 at 14:33

BahaEddine Ayadi

9879 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5095359 Over a year ago

Thanks. That with a small modification, I used label class instead of div for Text and didnot use css.

Collectives™ on Stack Overflow

How to align text and checkbox using bootstrap3

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related