title: Increasing Height of Bootstrap Jumbotron but Remaining Responsive
body: <p>I have been playing around with <a href="http://getbootstrap.com/components/#jumbotron" rel="noreferrer">Bootstrap's Jumbotron</a> to place a background image. Extremely simple to do:</p>
  
  <pre><code>.jumbotron
  {
      background: url('path/to/images/banner.jpg') no-repeat center center; 
      background-size: cover;
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It looks great and is responsive. However, the Jumbotron is only as large as the content inside it - of which I have very little. As a result, it is far thinner than I would like and I would like to increase its default height <em>while still maintaining the responsiveness</em>. So, for example, something like this doesn't work:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;div class="container" style="height: 600px;"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's the right height, but the image is no longer responsive. I have been looking into the various mixins/variables available to me hoping that something would pop out that I could leverage, but I'm not having any luck.</p>