CODEWITHSUNDEEP
twitter-bootstrap
Paul Jansen
Paul Jansen

Reputation: 1210

How to get the correct Bootstrap Jumbotron height?

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?

Upvotes: 10

Views: 70408

Answers (5)

Facundo Colombier
Facundo Colombier

Reputation: 3661

seems that no answer is the correct since all the container classes have other properties too so the most clean should be clearfix in this way:

<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>

Upvotes: 0

Chris Lacaille
Chris Lacaille

Reputation: 167

It may only apply to Bootstrap 4 but this solved it for me...

<div class="jumbotron-fluid"></div>

Upvotes: 0

Dinand
Dinand

Reputation: 359

Maybe a little late, but I believe 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>

Upvotes: 4

Trey Brister
Trey Brister

Reputation: 363

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">

Upvotes: 8

Trey Brister
Trey Brister

Reputation: 363

You can try to add this to your stylesheet.

.jumbotron { min-height: 600px; }

Also you can add an extra class to your body like <body class="test"> and use this CSS

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

You can adjust the min-height to fit your content.

Upvotes: 3

Related Questions