What is the best way to position a bootstrap row at the bottom of a container?
Here is an example:
HTML
<main class="bd-masthead container-fluid" id="" role="main" style="padding-top:5rem;">
<div class="row">
<div class="col">
<h1 class="text-light">
LukeBank
</h1>
</div>
</div>
<div class="row" style="padding-top:10px">
<div class="col">
<button type="button" class="btn btn-outline-light">Button</button>
</div>
</div>
</main>
CSS
html, body {
height: 100%;
width: 100%;
}
main {
height: 100%;
background-image: url(/img/frontpage.bg.jpg);
background-position: center center;
background-size: cover;
}
.otherpart {
height: 100%;
background-color: white;
background-position: center bottom;
background-size: cover;
}
I attempted to use .align-bottom, but it did not achieve the desired effect.