Question

I have a form with a mixture of editable and read-only fields which I want to style using Bootstrap. The editable fields are aligned correctly, but the read-only fields are not, as shown in this screenshot:

The HTML I’m using is:

<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 a read-only input for the fields which can’t be edited, as users get confused/frustrated when they can’t click in the box, and these are fields which can never be edited so it doesn’t really make sense to show them as disabled/read-only. I just want the text to be displayed and aligned correctly with the label. Is there a way I can do this, either by using something in Bootstrap or overriding the default styles?

My question is similar to this one, which wasn’t answered (at least not an answer to the original question), and as Bootstrap has had multiple releases in the past 7 months I thought it would be worth asking again in case anything had changed.

Answer 1

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.