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>