Bootstrap jumbotron full width and height of window with background image

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

This should give you a full width and full height jumbotron

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

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

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