Bootstrap search box and button aligned to right of header text (not in nav bar)

Question

I'm using Bootstrap 3.3.7 and am having difficulty getting the search box and button to drop underneath the heading text when viewed on small screen.

I'd like to get it to stack as follows:

Large screen (as it is currently):

[Title] [search input] [submit button]

Smaller screen:

[Title]
[search input] [submit button]

Small screen:

[Title]
[search input]
[submit button]

Any help much appreciated. I've been at this for ages and my CSS skills are too lacking for me to make any decent headway. Thanks.

Large screen:

Smaller screen (button gets cut off):

Small screen:

Here's my code:

<nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
         <!-- all the navigation stuff -->
    </div>
</nav>

<!-- main content -->
<div class="container" role="main">

    <div class="page-header">

        <form action="" method="GET" class="form-inline pull-right">

            <div class="form-group form-group-lg has-feedback">

                <label class="sr-only" for="search">Search</label>
                <input type="text" class="form-control" name="q" id="search" placeholder="Search">

                <span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>

            </div>

            <button type="submit" class="btn btn-lg btn-success">
            <span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
            </button>

        </form>

        <h2>Quite Long Header Text</h2>

    </div>

<!--rest of page content -->

</div>

update

Thank you @ Robert C. This is how things look with your suggestion:

and

and

The button has reduced in size which is great, but the input field now spans the entire width. I think it would all work just fine if the small button and input field were in the same row. This would mean that even on small devices I'd only need two stacks.

Could you suggest how I might go about reducing the size of the input box so that it will allow the button to stick to its left side on the same 'row'?

Thanks a lot

Answer 1

You will need to add some wrappers to make sure everything is lined up (or, alternatively remove the padding on your <h2>) but something along the following should provide you a Bootstrap Grid solution:

<div class="container" role="main">
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <h2>Quite Long Header Text</h2>
        </div>

        <div class="col-md-4 col-sm-4 col-xs-12">

            <form action="" method="GET" class="form-main">

            <div class="col-md-10 col-sm-10 col-xs-12">
                <label class="sr-only" for="search">Search</label>
                <div class="input-group">
                    <input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
                    <span class="input-group-addon group-icon"><span class="glyphicon glyphicon-user"></span>
                </div>
            </div>

            <div class="col-md-2 col-sm-2 col-xs-12">
                <button type="submit" class="btn btn-success">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="hidden-sm hidden-xs"> Search </span>
                </button>
            </div>

        </div>      

    </div>
</div>

You can see a Bootply fiddle here: http://www.bootply.com/bhvdBwcX4b

To view the Bootply fiddle on smaller screens be sure to click the mobile icon, as simply resizing your browser will result in a rendering error warning.