Line up labels and read only text in Twitter Bootstrap 2.0

Solution 1:

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>

Solution 2:

Create your own style and apply it as below -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap doesn't cover every eventuality and you will need to make your own styles.

Solution 3:

If you're using Bootstrap 3, definitely use the form-control-static class. If that's not an option, you could use the control-label class and have another class that removes the bold font weight.

in your html:

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

in your css:

.static-text {
    font-weight: normal;
}

Just make sure you list the static-text class after control-label on the class attribute in your html. That is so that it will override the font-weight established by control-label.

In your case you might also want to adjust the font size.

Of course, if bootstrap ever changes the CSS properties on the control-label class, you might have to go back and adjust your static-text class.

Solution 4:

Like @pwaring said, for me more styling was needed as well:

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

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

Solution 5:

To add to Simon's post, I added display: inline-block; to the CSS.

This is to match the display of the label and the text.