Align tags and read text only in Twitter Bootstrap 2.0

Question

I have a form with a mix of editable and read-only fields that I want to use with Bootstrap. Editable fields align correctly, but the read-only fields are not, as shown in this screenshot:

HTML used:

<form class="form-horizontal"> <div class="control-group"> <label class="control-label">Name</label> <div class="controls"> John Smith </div> </div> <div class="control-group"> <label class="control-label" for="date_of_birth">Date of Birth</label> <div class="controls"> <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" /> <span class="help-inline">dd/mm/yyyy</span> </div> </div> </form> 

I don’t want to show read-only input for fields that cannot be edited, because users get confused / frustrated when they cannot click in the field, and these are fields that can never be edited so it really doesn't make sense to show them as disabled / only for reading. I just want the text to display and align correctly with the label. Is there a way I can do this, either using something in Bootstrap or overriding the default styles?

My question is similar to this one that I didn’t answer (at least not the answer to the original question), and since Bootstrap had several issues in the last 7 months, I thought it was worth asking again if something changes.

Answer 1

Create your own style and apply it as shown 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 does not cover every opportunity, and you will need to create your own styles.

Answer 2

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 3

Like @pwaring, I needed more styles:

 .controls.readonly{ font-size: 14px; line-height: 20px; padding-top: 5px; } <div class="controls readonly"> Lorem Ipsum and then some </div> 

Answer 4

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

This corresponds to the display of the label and text.

Answer 5

If you are using Bootstrap 3, definitely use the form-control-static class. If this is not an option, you can use the control-label class and have another class that removes bold.

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 the control-label in the class attribute in your html. This means that it will override the font-weight set by the control-label .

In your case, you can also adjust the font size.

Of course, if bootstrap ever changes the CSS properties in the control-label class, you may have to go back and set up the static-text class.

Answer 6

This is using chris vdp's answer and providing full HTML code for people who have not found a chris that responded with dazzling evidence (like me and Eduardo in Norway).

I potentially show more code than necessary, but I found that the above solutions were not at the “copy-paste” level that I need most of the time. :-) I wanted to provide you with what I know works and can, pasting into your code in a dazzlingly obvious way. Just place this structure anywhere in your HTML.

Note. This works and requires Bootstrap 3.

 <form class="form-horizontal" role="form"> <div class="control-group"> <label for="personName" class="control-label col-sm-2">Name</label> <div class="controls col-sm-10"> <p id="personName" class="form-control-static">John Smith</p> </div> </div> <div class="control-group"> <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label> <div class="controls"> <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" /> <span class="help-inline col-sm-3">dd/mm/yyyy</span> </div> </div> </form> 

Answer 7

You can extend the controls class:

 <style> .controls.aligncorrect{ padding-top: 5px; } </style> 

and then using it as follows:

 <div class="controls aligncorrect" style="padding-top:5px;"> John Smith </div>