Using Input-group Inside An Inline Form

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

Solution 1:

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>

Solution 2:

I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.

try putting

<div class="col-lg-1"></div>

around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.