https://i.sstatic.net/9cjiD.jpg
I'm having trouble aligning two horizontal lines (hr) in my jumbotron. The first line aligns correctly at the beginning of the page, but the second line, located at the bottom of the logo, should be at the end of the page. I've set the height to 100 vh.
.jumbotron{
height: 100vh;
How can I align the second hr at the end of the page? I've tried using align-items-end, but it didn't work.
My code includes Bootstrap 4 and the HTML structure is as follows:
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Important Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS
============================================================================================= -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Spectral" rel="stylesheet">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Custom -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="hero-bg">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container m-auto nav-line">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
<ul class="navbar-nav mt-1">
<li class="nav-item">
<a href="#texting" class="nav-link">Texting</a>
</li>
<li class="nav-item">
<a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
</li>
<li class="nav-item">
<a href="#impression" class="nav-link">Impressionen</a>
</li>
<li class="nav-item">
<a href="#ueber" class="nav-link">Über mich</a>
</li>
<li class="nav-item">
<a href="#kontakt" class="nav-link">Kontakt</a>
</li>
</ul>
<!-- navbar-nav -->
</div>
<!-- navbar-collapse -->
</div>
<!-- container -->
</nav>
<!-- End Navigation -->
</header>
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container pt-0 pb-5 header-h">
<hr style="background: white; justify-content-start">
<div class="align-items-start row justify-content-center">
<div class="img-logo col align-self-start">
<img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo" >
</div>
<!-- col -->
</div>
<!-- row -->
<hr class="align-self-end" style="background: white;">
</div>
<!-- container -->
</section>
<!-- Header -->
<!-- jQuery -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="assets/js/popper.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Custom -->
<script src="assets/js/custom.js"></script>
</body>
</html>