Increasing Height of Bootstrap Jumbotron but Remaining Responsive

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.


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>