How to add help-text above input rather than below it in Twitter Bootstrap

Question

In creating forms using Twitter Bootstrap, how do you add help text above the input rather than below it. When I insert a statement above the input using the "help-block" class, the label and the input no longer align. Is there a way around that?

Answer 1

The bootstrap already have this kind of resource on it's css class. Take a look on the samples.

Your code must be on a form-group class, like this:

<div class="form-group">
   <label for="info-email" class="col-xs-2 control-label">e-mail</label>
   <div class="col-xs-10">
      <input type="text" class="form-control" id="info-email" placeholder="Your e-mail">
      <small class="text-muted">We'll never share your email with anyone else.</small>
   </div>
</div>

And, if you need to put the help text above the input, just change the place of the <small>...</small> to the above of the input:

<div class="form-group">
   <label for="info-email" class="col-xs-2 control-label">e-mail</label>
   <div class="col-xs-10">
      <small class="text-muted">We'll never share your email with anyone else.</small>
      <input type="text" class="form-control" id="info-email" placeholder="Your e-mail">
    </div>
</div>

Answer 2

Prepend help-block class element to controls

<div class="control-group">
    <label for="prependedInput" class="control-label">Prepended text</label>
    <div class="controls">
        <p class="help-block">Here's some help text</p>
        <div class="input-prepend">
           <input type="text" class="span2" id="prependedInput" size="16">
        </div>
   </div>

Instead of appending

 <div class="control-group">
    <label for="prependedInput" class="control-label">Prepended text</label>
    <div class="controls">
        <div class="input-prepend">
           <input type="text" class="span2" id="prependedInput" size="16">
        </div>
        <p class="help-block">Here's some help text</p>
   </div>

Demo: http://jsfiddle.net/D2RLR/935/