1

Can somebody explain what is going on here?

I'm using bootstrap 3.3.7.

Why are .container elements invisible?

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Big Brother</a>
        </div>
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" href="/">Home</a></li>
                <li><a href="#" href="/message">Messages</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>something</li>
            </ul>
        </div>
    </div>
    <div class="container">
        <h2>Invisible</h2>
    </div>

1 Answer 1

2

Your <h2> is not invisible, it's hiding behind your navbar.

You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.

If you add padding-top: 50px; to <body> you will see your <h2>.

If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.

Sign up to request clarification or add additional context in comments.

2 Comments

So, I should always pad my body by the size of nav bar? If it is fixed-top
At the minimum, yes. Bootstrap's navbar starts at a height of 50px. It's up to you if you'd like a little extra padding or not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.