title: Adding search form to top navbar bootstrap
body: <p>I am trying to add search form to the top navbar code shown below so that it will appear just before the Logout link with a small space and aligned to the right side, but it always appear either after the logout link or it will expand the navbar and look bad.</p>
  
  <p>So can someone please help me by telling me what I am missing here? Thanks for your time.</p>
  
  <p>Head section:</p>
  
  <pre><code>&lt;head&gt;
   &lt;link rel="stylesheet" href="css/bootstrap.css"&gt; 
   &lt;script type="text/javascript" src="js/jquery-2.0.3.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
   &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Body section:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse" role="navigation"&gt;  
    &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;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;Company&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="collapse navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;      
        &lt;li&gt;&lt;a href="#" class="current"&gt;Home&lt;/a&gt;&lt;/li&gt;               
        &lt;li class="active dropdown"&gt;
              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Employees &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;New Employee&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li class="nav-header"&gt;Reports&lt;/li&gt;
                &lt;li&gt;&lt;a href="#" target="_blank"&gt;Employees List&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/li&gt;                   
      &lt;/ul&gt;
  
      &lt;ul class="nav navbar-nav navbar-right"&gt;    
  
      &lt;form class="navbar-form" role="search"&gt;
          &lt;div class="input-group"&gt;
              &lt;input type="text" class="input-small" placeholder="Search" name="srch-term" id="srch-term"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt; 
  
        &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;      
      &lt;/ul&gt;
    &lt;/div&gt;   
  &lt;/nav&gt;
  </code></pre>