Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment.
<section id="profileHero">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron jumbotron-fluid rounded d-flex align-items-end align-bottom">
<div class="profileHeader rounded p-3">
<h3 class="display-4">[profile name]</h3>
<p class="lead">[profile location]</p>
</div>
</div>
</div>
</div>
</div>
</section>
I have attempted various combinations of align-items-end and align-bottom without success. The CSS added to the jumbotron is as follows:
.jumbotron {
background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)), url("./assets/images/image.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 45vh;
-webkit-filter: brightness(100%);
}
.jumbotron img {
-webkit-filter: none;
}
.profileHeader {
background-color: rgb(0,0,0); /* fallback */
background-color: rgba(0,0,0, 0.4); /* overlay */
color: white;
}
I aim to position the profileHeader div snugly in the lower left corner so that I can further adjust its placement using ml-2, mb-2 classes, etc.