Bootstrap jumbotron full width and height of window with background image

Question

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> 

Answer 1

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

Answer 2

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