0

I am able to vertically align my content, but when I reduce the browser's vertical space by dragging up on the window, the vertically aligned content overlaps the navbar.

The behavior I would like to have is that the vertically aligned content stops at the navbar. I tried to different ways to vertically center my content, using various Bootstrap 4 CSS classes, but that didn't help.

Here is a Codepen to demonstrate this: https://codepen.io/mravery/pen/aVvNKx (It assumes that you're including Bootstrap 4).

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Branding Here</a>
</nav>

<div class="container h-100 d-flex align-items-center">
  <div class="container">
    <div class="row jumbotron">
      <div class="col">
        <h1 class="display-4">Introduction content here.</h1>
        <p class="lead">Would somebody get this big walking carpet out of my way?</p>
        <hr class="my-3" /> Fugit ducimus nihil magnam quidem aperiam velit. Voluptatem dolorum nihil sit porro consequatur dignissimos et. Ad inventore consectetur temporibus minima perspiciatis fuga nesciunt.
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button type="button " class="btn btn-primary btn-lg">Start Quiz!</button>
      </div>
    </div>
  </div>
</div>

CSS

html, body { height: 100%};
Community
  • 1
  • 1
Son of the Wai-Pan
  • 12,371
  • 16
  • 46
  • 55
  • The reason is the `align-items: center` (explained in the dupe link) you have on the outer most `container`. The fix is to either give it `flex-start` or, if you need it centered, use auto margin on the next outer most `container`, but for center to work, you need to remove `h-100`. I also don't understand why using two nested `containers`. Furthermore, the `h-100` on the `container` cause it to always be below the viewports bottom. To avoid that you should move the `navbar` within it, so you can make use of the flex properties properly...but that might be a whole new question :) – Asons Nov 01 '17 at 16:13

1 Answers1

0

Set margin: auto; on your inner/second .container div (not just the margin left/right).

<div class="container h-100 d-flex align-items-center">
  <div class="container" style="margin: auto;">
    ....
  </div>
</div>
Ben
  • 5,079
  • 2
  • 20
  • 26