CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rharper
rharper

Reputation: 565

Bootstrap jumbotron full width and height of window with background image

I've got a bootstrap jumbotron on a website, and I was wondering how I would make it the full width and height of the screen, or at least touching the nav bar, as there is a gap between the jumbotron and the navbar.

So far, I have a "container" class inside the "jumbotron" class to make it full width of the screen without rounded corners, but how would I have it so it would be the full width and height of the device's window until someone scrolls down?

So far this is what I've got:

<div class="jumbotron">
    <div class="container">
    <center><h1>Hello, World!</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula mauris, iaculis quis tortor eget, ultricies mollis nisi. 
        </p>
        <a class="btn btn-default" href="#">Button 1</a>
        <!-- <a class="btn btn-info" href="#">Button 2</a> -->
    </center>
    </div>
</div>

Upvotes: 26

Views: 79464

Answers (6)

Богдан Туренко
Богдан Туренко

Reputation: 83

It is fully achieveable without custom css using just two css classes

<div class="jumbotron vh-100 mb-0">
    <div class="container">
        <!-- Your jumbotron here -->
    </div>
</div>

mb-0 is only required if you only have jumbotron and don't want scroll bar to appear.

vh-100 means viewport height 100% and mb-0 means margin botton 0

See https://getbootstrap.com/docs/4.5/utilities/sizing/ and https://getbootstrap.com/docs/4.5/utilities/spacing/

Upvotes: 0

NXT Dev
NXT Dev

Reputation: 91

I've had a problem with this recently and nothing helped for a while. The jumbotron left a space at the button and the image didn't reach the footer.

This solution was close but didn't work on some pages

    .jumbotron {
      height: 100vh;
      ...
    }

so I found this simple solution:

    .jumbotron {
      min-height: 100vh;
      ...
    }

I hope this helps some people

Upvotes: 1

user6780526
user6780526

Reputation: 

<div class="jumbotron" style="height:100vh;"></div>

This should give you a full width and full height jumbotron

Upvotes: 2

Swapnil Sourabh
Swapnil Sourabh

Reputation: 519

You can achieve this by using the jumbotron just beneath the navbar. You should use the jumbotron inside a container or div, with its class as:

<div class="container-full-bg">

Using 'full-bg' will increase the width of jumbotron to fit the page. In order to increase the height, I used the text within the container class or simply used <br> tags to increase the jumbotron height accordingly per my needs. A sample:

<div class="container-full-bg">  <!--  increased the jumbotron width -->
        <div class="jumbotron ">
            <div class="container">
              <br><br><br>
              <p> Write here <p>
              <br><br><br><br>
            </div>
        </div>
</div>

Now to display the image properly in the jumbotron, use background-size as cover,customizing the css file as:

.jumbotron{
    background-image: url(show-copy.jpg) ;
    background-size: cover; 
    height: 100%;
    width: 100%;
}

Hope this helps :)

Upvotes: 4

Mike Grote
Mike Grote

Reputation: 19

There are a number of ways to achieve what you are trying here. I know this thread is a bit old, but....

<div class="jumbotron jumbotron-fluid">

would make the jumbotron full width.

Upvotes: 0

MrHaze
MrHaze

Reputation: 3996

So we have 3 issues here:

Remove excess space under navbar

The default bootstrap navbar has a margin-bottom: 20px, you want to override that like this:

.navbar {
    margin-bottom: 0px;
}

Make jumbotron full width

Bootstrap's documentation says:

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

So basically:

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Make jumbotron full hight

I'm not sure how cleanly this will fit into your project, but you can try something like:

.jumbotron{
    height: 100vh;
}

*A good-to-know: The vh stands for viewport height

Upvotes: 66

Related Questions