Twitter Bootstrap 3 form-inline text input width depends on label width

Question

I've noticed strange behavior of the Twitter Bootstrap 3: size of the input box depends on the size of its label when they are grouped with form-group:

<form class="form-inline">
    <div class="form-group">
        <label>A</label>
        <input type="text" class="form-control" placeholder="First Name">
        </div>
    <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" placeholder="Last Name">
    </div>
</form>

Here is demo: http://jsfiddle.net/a3vAP/4/

Is this feature or bug? What would be the fix? I need input boxes of the same size.

Answer 1

The longer label is causing the input to be longer since they're both contained in the same form-group which uses display:inline-block so it's automatically sizing to the width of the label.

According the Bootstrap docs..

"Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within."

So, you'd need to add some simple CSS to control the width..

.form-inline .form-group input {
    width:140px;
}

Demo: http://bootply.com/87747