Bootstrap checkbox input align vertically

Question

Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.

Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?

Here is the JS BIN if you are interested.

Answer 1

In your HTML add a class that will handle the checkbox margin:

 <div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <label>label 1</label>
      <input type="text" />
    </div>
    <div class="span3">
      <label>label 2</label>
      <input type="text" />
    </div>
    <div class="span3 checkbox">
        <input type="checkbox" />test description
    </div>
  </div>
</div>

and in your CSS:

input[type="checkbox"] {
 // i just remove this part..
}
.checkbox {
  margin: 30px 0 0 0;
}

Don't put the margin on the checkbox, but on the parent div. Check this jsFiddle.

Hope this helps

Answer 2

Try to always use something like this:

<div class="span3">
    <label for="checkbox" class="checkbox">
        <input type="checkbox" id="checkbox" class="checkbox">test description
    </label>
</div>

http://jsbin.com/itAdAWA/1/edit

Answer 3

How about putting a <label> before the checkbox like this? ..

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span3">
        <label>label 1</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>label 2</label>
        <input type="text">
      </div>
      <div class="span3">
        <label>test</label>
        <input type="checkbox">
      </div>
    </div>
  </div>

Bootply: http://bootply.com/86998