Increasing Height of Bootstrap Jumbotron but Remaining Responsive

Question

I have been playing around with Bootstrap's Jumbotron to place a background image. Extremely simple to do:

.jumbotron
{
    background: url('path/to/images/banner.jpg') no-repeat center center; 
    background-size: cover;
}

and

<div class="jumbotron">
    <div class="container">...</div>
</div>

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 while still maintaining the responsiveness. So, for example, something like this doesn't work:

<div class="jumbotron">
    <div class="container" style="height: 600px;">...</div>
</div>

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.

Answer 1

I'd do it with padding:

.jumbotron {
    ...
    padding: 5em inherit;
}

By using relative units it scales.

Fiddle demo

Alternatively, use a minimum height:

.jumbotron {
    ...
    min-height: 300px;
}

Fiddle demo

This allows the element to expand if needed.

Answer 2

You can achieve this by using relative padding-top and relative padding-bottom in the jumbotron css:

    .jumbotron {
      background: url('http://placekitten.com/800/500') no-repeat center center;
      background-size: cover;
      padding-top: 20%;
      padding-bottom: 20%;
    }

<div class="jumbotron">
  <div class="container">
    <h1>Your Text Here!</h1>
  </div>
</div>