CODEWITHSUNDEEP
csshtmltwitter-bootstrap
lowercase
lowercase

Reputation: 1220

Bootstrap jumbotron full browser height issue

I have a Bootstrap Jumbotron as per below code...

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

The css makes sure the jumbotron finds browser height and fills it like this...

html,body {
height:100%;
}

.jumbotron {
height:100%;
}

My fixed navbar has a height of 60px and I want the jumbotron to have a margin-top: 60px so it starts 'below' the nav and not 'behind' the nav.

The problem is - this adds a 60px margin to the bottom of the jumbotron over the 100% height I have set. How can i remove this 60px margin it automatically adds to the bottom of the browser?

Upvotes: 1

Views: 2561

Answers (1)

Adrift
Adrift

Reputation: 59859

When using the fixed navbar, Bootstrap recommends using top padding on the body for this: 

body {
    padding-top: 60px; /* set this equal to navbar's height */
}

This is mentioned in the docs

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

Upvotes: 3

Related Questions