title: How do I get the form to be on the same line as by navigation buttons?
body: <p>I've tried playing with putting the indents and placement in different places but it still appear underneath the navigation button. I want it on the same line across the top. 
  I might of made it a bit messy trying to get it on the same line, if so just take out whenever isn't necessary. 
  `</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Bootstrap For Beginners&lt;/title&gt;
      &lt;meta name="description" content="Hello World"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
  
  &lt;style&gt;
      .nav {
  
      }
      .nav container-fluid {
  
  
      }
      .nav li {
          display: inline;
          padding: 20px;
          font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
      }
  
      .jumbotron {
  
  
      }
      .jumbotron container-fluid {
  
      }
      .jumbotron h1 {
  
      .footer {
  
      }
      .footer container-fluid {
  
      }
      .footer p {
  
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="nav"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;ul class="nav nav-pills"&gt;
                  &lt;li class="pull-right"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="pull-right"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-md-6"&gt;
                          &lt;input type="email" class="form-control" id="exampleInputEmail2" placeholder="Have Feedback?"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;button type="submit" class="btn btn-default"&gt;Submit Feedback&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="jumbotron"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;h1&gt;Student&lt;/h1&gt;
                  &lt;h1&gt;Business&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;p&gt;By:&lt;/p&gt;
              &lt;p&gt;For:&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>The input bar doesn't seem to be responsive on really really small windows, is that normal?</p>
  
  <p>I also want the footer to be the same size as the nav header and the jumbotron to fill up the rest of the space in between, everything fits in the window with no scrolling. </p>
  
  <p>Thanks in advance. </p>