I have successfully aligned my content vertically, but I encountered an issue when resizing the browser window vertically - the aligned content overlaps with the navbar.
What I want is for the vertically aligned content to stop at the navbar. I have experimented with different Bootstrap 4 CSS classes to center my content vertically, but I haven't found a solution.
You can see the issue in action on this Codepen: https://codepen.io/mravery/pen/aVvNKx (Bootstrap 4 is assumed to be included).
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%};