Why does using an input group break the baseline alignment in bootstrap?

Question

If I have a form with a label next to an input, in plain HTML, and both are inline (or inline block), then they are aligned by their baseline. But when using bootstrap and putting the input in an input group, it seems they get aligned by their bottom.

I tried to replicate this without bootstrap, but I couldn't, it just works. I created fiddle to show the problem:

http://jsfiddle.net/pupeno/9aJCF/3/

The HTML is:

<p>A case working, with just an input:</p>
<div class="form-group without-input-group">
    <label>label</label>
    <input type="text" class="form-control" value="value" />
</div>
<hr/>
<p>A case broken with the same HTML structure, but not using bootstrap:</p>
<div class="without-bootstrap">
    <label>label</label>
    <div class="group">
        <input type="text" class="form-control" value="value" />
        <span>addon</span>
    </div>
</div>
<hr/>
<p>The broken situation, with the input group:</p>
<div class="form-group with-input-group">
    <label>label</label>
    <div class="input-group">
        <input type="text" class="form-control" value="value" />
        <span class="input-group-addon">addon</span>
    </div>
</div>

and the CSS:

.without-input-group input {
    max-width: 250px;
    display: inline-block;
}

.without-bootstrap .group {
    max-width: 250px;
    display: inline-table;
}
.without-bootstrap .group input {
    display: table-cell;
}
.without-bootstrap .group span {
    display: table-cell;
}


.with-input-group .input-group {
    max-width: 250px;
    display: inline-table;
}

score 0 · Answer 1 · answered Apr 28 '14 at 23:05

0

Because the input group is display: inline-table; and the label is outside the input-group. If you inspect the input-group-addon element, you see that it is set to display: table-cell; and vertical-align: middle;. If you move the label inside the input-group and style it same as the input-group-addon it lines up correctly.

<div class="form-group with-input-group">    
    <div class="input-group">
        <label>label</label>
        <input type="text" class="form-control" value="value" />
        <span class="input-group-addon">addon</span>
    </div>
</div>

.

.input-group label {
    padding: 4px;
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/N62he/

answered Apr 28 '14 at 23:05

Kunsang

402
2
5

Labels shouldn't be inside input groups in Bootstrap. – Pablo Fernandez Apr 29 '14 at 06:39
Also, I updated the fiddle to show the case of the label being properly aligned next to the inline-table. – Pablo Fernandez Apr 29 '14 at 06:45
When you apply the properties from the input-group to the label and the form-group it works. http://jsfiddle.net/9aJCF/5/ – Kunsang Apr 29 '14 at 12:02

Why does using an input group break the baseline alignment in bootstrap?

1 Answers1

http://jsfiddle.net/N62he/

Linked