title: Bootstrap 4 aligning row to the bottom of a container
body: <p>How do I align a bootstrap row to the bottom of a container?</p>
  
  <p>Like this:
  <img src="https://i.stack.imgur.com/efKCr.jpg" alt="Like this"> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;main class="bd-masthead container-fluid" id="" role="main" style="padding-top:5rem;"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;h1 class="text-light"&gt;
          LukeBank
        &lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row" style="padding-top:10px"&gt;
      &lt;div class="col"&gt;
        &lt;button type="button" class="btn btn-outline-light"&gt;Button&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;  
  }
  </code></pre>
  
  <p>I tried to use <code>.align-bottom</code>, but it didn't work.</p>