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

Question

In bootstrap 2, what is the recommended way to line up labels and text fields in a read-only form. The following code example creates inconsistent fields:

<form class="form-horizontal"> <fieldset> <legend>Sample</legend> <div class="control-group"> <label class="control-label">Readonly Field</label> <div class="controls"> Lorem Ipsum and then some </div> </div> </fieldset> </form> 

Please note that I can fix this myself using special CSS. It's not a problem. It just seems silly to me that this is not built in, so I feel that I have to ignore something.

Answer 1

You can use uneditable input

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

EDIT:

Starting with bootstrap 3.0, a class has been added to handle this.

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

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

Answer 2

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

In your case:

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