title: How to align all rows to the bottom of a container in bootstrap (4.1)?
body: <p>Setup:</p>
  
  <ol>
  <li>I have a container covering the whole viewport (height:100vh);</li>
  <li>Within this container I have 4 rows.</li>
  </ol>
  
  <p>Required:</p>
  
  <ol>
  <li>I need all the rows at the bottom of the container.</li>
  <li>There should not be any spacing between the rows.
  (In short I need the whole page content aligned to the bottom of the screen. If any extra space remains it should remain at the top of the page.)</li>
  </ol>
  
  <p>I tried using self-align-end but it applies only to columns within a row and not to the row within the container.</p>
  
  <p>Thanks in Advance ;)</p>
  
  <p>Snippet:</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>.row:last-child {
    position: fixed;
    bottom: 0;
    left: 0;/*optional*/
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container-fluid bg-dark" style="height: 100vh;"&gt;
    &lt;div class="row bg-warning container-fluid no-gutters justify-content-start"&gt;
      This is Row 1
    &lt;/div&gt;
    &lt;div class="row bg-danger container-fluid no-gutters justify-content-center"&gt;
      This is Row 2
    &lt;/div&gt;
    &lt;div class="row bg-warning container-fluid no-gutters justify-content-end"&gt;
      This is Row 3
    &lt;/div&gt;
    &lt;div class="row bg-success container-fluid no-gutters justify-content-center"&gt;
      This is Row 4
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>