title: How to add a search box with icon to the navbar in Bootstrap 3?
body: <p>I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) <strong>in the top navbar</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/OXBL1.png" alt="Navbar Search"></p>
  
  <p>In Bootstrap 2, it could've ben done like this:</p>
  
  <pre><code>&lt;form class="form-search" method="get" id="s" action="/"&gt;
      &lt;div class="input-append"&gt;
          &lt;input type="text" class="input-medium search-query" name="s" placeholder="Search" value=""&gt;
          &lt;button type="submit" class="add-on"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But I am not sure how to produce the same in Bootstrap 3 as so much has changed.</p>
  
  <p>The default HTML for the navbar search box form in Bootstrap 3 is:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>How do I modify it to achieve what I need?</p>