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.