Bootstrap: has-feedback on a form-group does not render correctly if the label on the form-group is not specified or removed

[abishekrsrikaanth]

When using the has-feedback class on a form and if the label on the form group is not specified then it does not render correctly.

<form>
    <div class="form-group has-success has-feedback">
        <input type="text" class="form-control" id="inputSuccess2"> 
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</form>

The above code renders like this.

[cvrebert]

Not labeling your form fields is bad practice to begin with.

[abishekrsrikaanth]

@cvrebert, how abt this

<form>
    <div class="form-group has-success has-feedback">
        <label class="control-label sr-only" for="inputSuccess2">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess2"> 
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</form>

This also has the same output

[cvrebert]

FWIW, .has-feedback .form-control-feedback { top: 1px; } seems to be a decent workaround in such a case.
Still, seems kinda niche. Omitting the label could make sense in a .form-inline, but the icon already displays correctly in that case.

[cvrebert]

A somewhat interesting use case is given in #12911.

[mdo]

Yeah, there's no way to know if the label is there or not in a reliable, performant, and non-shitty way. Using a specific override as you need is the only way this scales beyond our initial styles.

[cvrebert]

We should document that a label is required.

[reywood]

For those using sr-only, overriding top with the sibling selector (~) seems to work:

.has-feedback label.sr-only ~ .form-control-feedback {
    top: 0;
}

This has the benefit of allowing has-feedback form-groups with non-sr-only labels to still display feedback correctly.

[davhdavh]

This is similarly broken if the label has more than 1 line