CODEWITHSUNDEEP
cssformstwitter-bootstrap
Hard-Boiled Wonderland
Hard-Boiled Wonderland

Reputation: 1399

Twitter Bootstrap - Vertically align input with label inside control-group

<div class="control-group">
    <label class="control-label ">Date of purchase as detailed on your receipt</label>
    <div class="controls">
        <div class="input-append">
            <select name="invoice_date" value="2013-06-28" required="required">
                <option value="">Please Select</option>
            </select>
            <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button>
        </div>
    </div>
</div>

I tried a few solutions and one kind of worked using position absolute, but this affected other areas of bootstrap in particular when it gets responsive.

http://jsfiddle.net/tGZLd/

I am trying to get the input to line up with the center of the label that has been pushed over multiple lines but in the best practice of bootstrap.

Or should I simply give up and force it to display a full width label with the input underneath?

Any insight would be great, thanks!

Upvotes: 6

Views: 24161

Answers (2)

omma2289
omma2289

Reputation: 54629

How about overriding Bootstrap's styles and using display:inline-block; instead of floats for the positioning, then you can use vertical-align to center the label:

.form-horizontal .control-label {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.form-horizontal .controls {
    display: inline-block;
    margin-left: 20px;
}

Example fiddle

Upvotes: 13

South Coast Web
South Coast Web

Reputation: 440

Add a class to the input-append then apply a margin to that.

    <div class="input-append spacedTop">

Then add the CSS 

    .spacedTop { margin-top:10px; }

If you don't do an extra class it will margin any other input-appends you use throughout your site.

Upvotes: -1

Related Questions