title: Bootstrap Inline Form on mobile
body: <p>I want to make an <a href="http://getbootstrap.com/css/#forms-inline" rel="nofollow noreferrer">inline form</a> for mobile viewport, such that the search button will be next to the input. But The documents said that </p>
  
  <blockquote>
    <p>This only applies to forms within viewports that are at least 768px wide.</p>
  </blockquote>
  
  <p>How can I achieve this results without using inline forms?</p>
  
  <h2>Mobile Screen</h2>
  
  <p><strong>navbar-header</strong></p>
  
  <p><img src="https://i.stack.imgur.com/muNMQ.png" alt="navbar-header"></p>
  
  <p>Here's the navbar-header snippet: (Adding <code>.form-inline</code> in the form won't make it inline as the document mentioned)</p>
  
  <pre><code>&lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;!-- icon-bar span omitted --&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
  
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  
    &lt;form class="navbar-form navbar-left" role="search"&gt;
      &lt;div class="form-group"&gt;
        &lt;input type="text" class="form-control" placeholder="Search"&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>