title: Bootstrap align-items doesn't work as expected
body: <p>I'm trying to make a simple webpage with header and footer using bootstrap 4, the problem is that the footer won't show in the end of the page.
  here is my html, please can anyone tell me what to do.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
  }
  
  .appbox {
      border-left: #000000 solid 2px;
      border-right: #000000 solid 2px;
      height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;    
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src='main.js'&gt;&lt;/script&gt;
  
  &lt;div class="container appbox"&gt;
      &lt;div class="row align-items-start"&gt;
         &lt;div class="col-12 text-center "&gt;
           &lt;h3&gt;Header&lt;/h3&gt;
         &lt;/div&gt;
      &lt;/div&gt;
          
      &lt;div class="row align-items-end"&gt;
         &lt;div class="col-12 text-center"&gt;
           &lt;h3&gt;Footer&lt;/h3&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>