Menu
I have a very simple example of a bootstrap jumbotron split into 2 parts. The left part contains some text, the right part contains an image:
<div class="jumbotron">
<div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1>
<p>This page would be great if the jumbotron would be higher.</p>
</div>
<div class="col-md-4">
<img src="//placehold.it/300" class="img-responsive">
</div>
</div>
See also my bootply example. For some reason the height of the background of the Jumbotron is not large enough to contain the text and the image. What do I need to do to fix this?
247
You can change your . jumbotron height using @media() queries to reflect major screen sizes. At some point, you will overflow the image but at least it won't be by much because you have established that the . jumbotron won't go too far from the 2:1 ratio.
A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.
jumbotron class has padding property that makes its size bigger. You can change height to modify it.
I have tested this and it works.
You can edit your jumbotron div tag to include the css class container.
Example:
<div class="jumbotron container">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
