Bootstrap search field and button aligned to the right of the title text (not in the navigation bar)

Question

I use Bootstrap 3.3.7, and it’s hard for me to get a search box and a button to drop the text under the heading when viewing on a small screen.

I would like it to add up as follows:

Big screen (as at present):

[Title] [search input] [submit button]

Smaller screen:

[Title]
[search input] [submit button]

Small screen:

[Title]
[search input]
[submit button]

Any help is greatly appreciated. I have been for this for ages, and my CSS skills are not enough for me to make any decent progress. Thank.

Big screen:

Smaller screen (button turns off):

Small screen:

Here is 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

Thanks @Robert C. Here's how it looks with your suggestion:

and

and

, , . , , . , .

, , ?

Answer 1

, , (, , <h2>), - Bootstrap Grid:

<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>

Bootply: http://www.bootply.com/bhvdBwcX4b

Bootply , , .

Answer 2

col rows . col...

<!-- main content -->

<div class="col-lg-6 col-md-6 col-sml-12">
  <h2>Quite Long Header Text</h2>

</div>

<div class="col-lg-6 col-md-6 col-sml-12">

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

    <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>

</div>

Answer 3

I changed my previous solution to your problem. Take a look at the example here CODEPEN .

Hope it will be helpful for you.

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container">
    <!-- all the navigation stuff -->
  </div>
</nav>

<!-- main content -->
<div class="section-main">
  <div class="container" role="main">
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <h2>Quite Long Header Text</h2>
      </div>
      <div class="col-xs-12 col-md-6">
        <form action="" method="GET" class="form-main  form-inline nofloat-xs pull-right pull-left-sm">

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

            <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>
              </span>
            </div>

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


          </div>


        </form>
      </div>
    </div>


    <!--rest of page content -->

  </div>
</div>

CSS

.form-main {
  margin-top: 15px;
}

.form-input-fields {
 margin-bottom: 0; 
}

.section-main {
  margin-top:40px;
  background-color: lightgrey;
  padding: 20px 0;
}
.group-icon {
  background-color:#fff;
  border:0; 
}
.input-search {
  border:1px solid #fff;
  box-shadow:none;  
}
@media (max-width: 992px) {
    .pull-left-sm {
        float: left !important;
    }

}
@media (max-width: 767px) {
    .nofloat-xs {
        float: none !important;
    }
  .btn-submit {
    margin-top:10px;
  }
}

enjoy :)