title: Bootstrap make full width full height column
body: <p>I have the following layout:</p>
  
  <pre><code>&lt;body&gt;
    &lt;nav class="navbar navbar-inverse"&gt;
        ...
    &lt;/nav&gt;
  
    &lt;div class="jumbotron"&gt;
       ...
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
       &lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;...&lt;/div&gt;
       &lt;/div&gt;
  
       &lt;div class="row"&gt;
            &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
            &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
            &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Navbar and header take up 100% of the screen width. However, the columns don't - huge empty margins remain near the left and right edges of the screen. </p>
  
  <p>If I remove the <code>container</code> div everything takes up 100% of the space and it works fine by me, but I'm not sure if it's a good practice since in alll examples <code>container</code> is used. Also, I want to make the columns take up all the space to the end of the page and not sure if <code>container</code> is necessary to accomplish it.</p>