title: How to create responsive search box in Bootstrap
body: <p>I am trying to create a responsive search box using Bootstrap. I have taken a row class and inside the row, I took 2 columns. The second column has a form control input and a search button. It works well in large screen but as soon as I get into small or extra small screen then the search button goes to the next line instead of staying in the same line with the input field. Anybody can help me to get rid of this problem? Thanks in advance.[Search icon goes below the input field</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class='container'&gt;
    &lt;div class='content-wrapper'&gt;
      &lt;div class='row'&gt;
        &lt;div class='col-xs-12 col-sm-12 col-md-8 col-lg-8'&gt;
          &lt;article&gt;
            According to the customer review we are expanding diligently and we have reached over 70 locations. So that you do not lose sight of the overview. You will find a list of FORKS over KNIVES in all locations.
          &lt;/article&gt;
  
        &lt;/div&gt;
        &lt;div class='col-xs-12 col-sm-12 col-md-4 col-lg-4'&gt;
  
          &lt;form class='navbar-form'&gt;
            &lt;div class='form-group'&gt;
              &lt;input class='form-control' type='text' name='search' placeholder='Location'&gt;
  
            &lt;/div&gt;
            &lt;button type='submit' class='btn btn-default'&gt;&lt;span class='glyphicon glyphicon-search'&gt;&lt;/button&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/NkZMY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NkZMY.png" alt="enter image description here"></a></p>