title: Bootstrap: How do I make the input box and button stay on the same line?
body: <p>I'm helping with a website and learning all of these skills as I go. I saw similar questions but did not find a helpful resolution. </p>
  
  <p>You can see on the upper right of this screenshot that the search box and button refuse to be on the same line.
  <a href="http://i.imgur.com/fiurnYs.png" rel="nofollow">http://i.imgur.com/fiurnYs.png</a></p>
  
  <p>HTML code for the search box looks like this: </p>
  
  <pre><code>    &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
      &lt;form class="navbar-form" role="search"&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" 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="icon-search"&gt; &lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS code looks like this: 
  <a href="https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css" rel="nofollow">https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css</a></p>