How to line up labels and read-only fields in a Bootstrap 2 form

Question

In bootstrap 2, what\'s the recommended way of lining up labels and read-only text fields in a form. The following code sample creates misaligned fields:

Answer 1

There is a hack. You can use <label> with class "checkbox"

In your case:

<div class="controls">
 <label class="checkbox">
     Lorem Ipsum and then some
 </label>
</div>

Answer 2

You can use the uneditable input

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>

EDIT:

As of bootstrap 3.0 a class has been added to handle this

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-static class on a <p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>

Answer 3

As of bootstrap 4.0 the .form-control-static class has been replaced by the .form-control-plaintext class.