Geek Answers Handbook

How to get the correct Jumbotron bootstrap height?

I have a very simple example of hacking a jumbotron in two. The left part contains the text, the right part contains the 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 download example . For some reason, the background height of the Jumbotron is not large enough to contain text and image. What do I need to do to fix this?

+8
twitter bootstrap
source share
5 answers

Maybe a little late, but I think your solution will be Jumbotron and container fluid

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron container-fluid"> <div style="clear:both;"> Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor. Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl. </div> <br/> <div style="clear:both;"> Curabitur a felis in nunc fringilla tristique. Vivamus euismod mauris. Aenean massa. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Proin magna. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Aliquam lobortis. Ut tincidunt tincidunt erat. Nulla porta dolor. Quisque id mi. Nunc nonummy metus. Nullam quis ante. Vivamus aliquet elit ac nisl. </div>
+4
source share

I tested this and it works.

You can edit the jumbotron div tag to include a css class container.

Example:

 <div class="jumbotron container">
+8
source share

You can try adding this to your stylesheet.

 .jumbotron { min-height: 600px; }

You can also add an extra class to your body, for example <body class="test"> , and use this CSS

 test.jumbotron { min-height: 600px; }

You can customize min-height according to your content.

+3
source share

It can only be applied to Bootstrap 4, but this allowed it for me ...

 <div class="jumbotron-fluid"></div>
0
source share

it seems that the answer is not correct, since all container classes have different properties, so the cleanest should be clearfix as follows:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron clearfix"> <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>
0
source share

More articles:


All Articles