title: Line up labels and read only text in Twitter Bootstrap 2.0
body: <p>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: </p>
  
  <p><img src="https://i.stack.imgur.com/6xVgY.png" alt="readonly field"></p>
  
  <p>The HTML I'm using is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="form-horizontal"&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label"&gt;Name&lt;/label&gt;
    &lt;div class="controls"&gt;
      John Smith
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="control-group"&gt;
    &lt;label class="control-label" for="date_of_birth"&gt;Date of Birth&lt;/label&gt;
    &lt;div class="controls"&gt;
      &lt;input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" /&gt;
      &lt;span class="help-inline"&gt;dd/mm/yyyy&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>My question is similar to <a href="https://stackoverflow.com/questions/9887430/how-to-line-up-labels-and-read-only-fields-in-a-bootstrap-form">this one</a>, 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.</p>