Horizontal form plain text vertical alignment

Question

In my horizontal form I try to have a row, which does not contain an edit control, but just a static text (e.g. uneditable ID). When I put the there it is not aligned with the label. Is there an element/class that I can use to have it aligned properly?

<div class="form-horizontal">

    <div class="control-group">
        <label class="control-label">ID:</label>
        <div class="controls">
            <span class="help-inline">777</span>
        </div>
    </div>

</div>

as of bootstrap 3.0 use .form-control-static http://stackoverflow.com/questions/9887430/how-to-line-up-labels-and-read-only-fields-in-a-bootstrap-form — Aaron Hoffman, Mar 01 '14 at 00:09

score 0 · Answer 1 · answered Jun 02 '13 at 23:12

0

Without seeing what your CSS looks like, this is hard to define.

But with vanilla Bootstrap CSS, try setting padding-top for your span, like so:

.help-inline {
    padding-top: 5px;
}

Fiddle here.

answered Jun 02 '13 at 23:12

mccannf

16,374
3
48
63

Horizontal form plain text vertical alignment

1 Answers1