title: Bootstrap jumbotron full width and height of window with background image
body: <p>I've got a bootstrap  jumbotron on a website, and I was wondering how I would make it the full width and height of the screen, <em>or at least touching the nav bar</em>, as there is a gap between the jumbotron and the navbar. </p>
  
  <p>So far, I have a "container" class inside the "jumbotron" class to make it full width of the screen without rounded corners, but how would I have it so it would be the full width and height of the device's window <strong>until someone scrolls down?</strong></p>
  
  <p>So far this is what I've got:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;
      &lt;center&gt;&lt;h1&gt;Hello, World!&lt;/h1&gt;
          &lt;p&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula mauris, iaculis quis tortor eget, ultricies mollis nisi. 
          &lt;/p&gt;
          &lt;a class="btn btn-default" href="#"&gt;Button 1&lt;/a&gt;
          &lt;!-- &lt;a class="btn btn-info" href="#"&gt;Button 2&lt;/a&gt; --&gt;
      &lt;/center&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>