Bootstrap 4 aligning row to the bottom of a container

Question

How do I align a bootstrap row to the bottom of a container?

Like this:

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 tried to use .align-bottom, but it didn't work.

Answer 1

If you are using bootstrap 4, you can use the class - fixed-bottom.

Check :

https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Fixed footer in Bootstrap

Answer 2

For bootstrap 4, you can use the shorthand classes and set mt-auto, which will have the effect of aligning your element to the bottom of the container.

https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer 3

To align to bottom you could try with flexbox:

display: flex;
flex-direction: column;
justify-content: space-between;

or if you just have one element

display: flex;
flex-direction: column;
justify-content: flex-end;

Answer 4

Try to add align-self-end class to the div with col class

<div class="col align-self-center">