Using input-group inside an inline form

css, html, twitter-bootstrap, twitter-bootstrap-3

Solution

This was indeed a bug and was resolved (check the issue on github for more info).

From now on the inline forms in BootStrap require to wrap the child form controls with `.form-group`.

So my code would become:

<form action="" class="form-inline">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
    </div>

    ...
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">BUT</span>
            <input type="text" class="form-control" placeholder="not with input-groups" />
        </div>
    </div>
</form>

Problem

When appending an `input-group` to a `form-inline`, the `input-group` appears below the form on a "new line" instead of inline with the other controls. It seems that this is because the `input-group` wrapper class has `display` set to `table` whereas the other inputs, which work fine, have their `display` set to `inline-block`. Of course, it is not possible to give the `input-group` the `inline-block` display because its child `add-on` span, which has `display: table-cell`, needs the property of the parent to align correctly. So my question is: is it possible to use `input-group` inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes. Here is a demo illustrating my point. The code is the following: ``` <form action="" class="form-inline"> <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> <div class="checkbox"> <label> <input type="checkbox" /> and Checkboxes </label> </div> <select class="form-control" style="width: 150px;"> <option>and Selects</option> </select> <button type="submit" class="btn btn-default">and Buttons</button> <div class="input-group" style="width: 220px;"> <span class="input-group-addon">BUT</span> <input type="text" class="form-control" placeholder="not with input-groups" /> </div> </form> ```

Original source