Bootstrap - input-group-btn wants to float right

Question

So I'm building a navbar on a website with a search bar included, along with a grouped button. It works fine on a desktop view, but when I shrink down to mobile view and the site produces the collapsible menu, the search bar stays to the left, but the button floats off to the right. I do not have this issue when I remove the span with the input-group-btn class that surrounds it.

<form class="navbar-form navbar-left form-inline" role="search">
    <div class="row">
        <div class="input-group">
            <input type="text" class="form-control" style="width: 250px;"/>
            <span class='input-group-btn'>
                <button type="button" class="btn btn-default" aria-label="Search">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </span>
        </div>
    </div>
</form>

Picture included http://bit.ly/1G706rC

EDIT: I fixed my own issue! I just had to add a pull-left class to the span

I have the same issue. I want to put an image right to a select but when I add the pull-left class to my span containing the image, it pulls it under the select on a different row. — Tristan

Aneesh Raman Aneesh Raman · Accepted Answer · 2018-05-16T10:42:07

The issue might be something to do with the width of the text-input to be fixed in px. Try a relative measure in percentages (%) and it might work since it will resize according to the window size.

Bootstrap - input-group-btn wants to float right

1 Answers