Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by hazal gökalp
hazal gökalp
2,998 Points

White Space under the Jumbotron in Bootstrap

In bootstrap4 -jumbotron, i've set a full width background image, and <h1 class=""display-1> Under jumbotron i've put a <div class="container-fluid">

a gap occurs btw jumbotron and div, when viewport size changes. I've managed to hide the gap, -changing the margin and padding values for the jumbotron and header in media queries- but is there a simpler way? ps: I want position of <h1> close to the bottom left of the jumbotron

 <!-- jumbotron -->
    <div class="jumbotron jumbotron-fluid  mb-0">
      <div class="container">      
        <h1 class="display-1 banner-header">Some <br>Text<br> Here</h1>
      </div>
      </div>
<!-- /jumbotron -->

 <!-- container-div-->
      <div class="container-fluid   mt-0 py-3 ">
        <div class="row">
          <div class="col-md-12 ">
            <h3>Some Text Here</h3>
          </div>
          <div class="col-md-12 ">
            <h1>Some Text Here</h1>
          </div>
        </div>
      </div>
<!-- /container-div --> 


Additional CSS

.jumbotron{

  height:100vh;
  background:url(".......");
  background-size: cover;
  background-position:center;
  padding-bottom:40rem;              /*for the white gap under the jumbotron*/

}

.banner-header{
  line-height: 1em;
  font-weight:400;
  margin-top:14rem;
  margin-bottom:4rem;
  }  ```