title: Bootstrap 4 cards - align content at the bottom
body: <p>I have a group of bootstrap cards put together in a card-group, meaning they all have the same width and height. Each card's content is different in height, and I need a button aligned at the bottom of each card (not the card's footer, i have other content there). I tried adding 'artificial' blank space in each card so they all match, but that breaks when resizing the window. Any ideas? Here's the relevant code.</p>
  
  <pre><code>&lt;div class="card-group"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
              Header
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div&gt;
                  Line 1
              &lt;/div&gt;
              &lt;div&gt;
                  Line 2
              &lt;/div&gt;
              &lt;div&gt;
                  Line 3
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-footer"&gt;
              Footer
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
              Header
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div&gt;
                  Line 1
              &lt;/div&gt;
              &lt;div&gt;
                  Line 2
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-footer"&gt;
              Footer
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
              Header
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div&gt;
                  Line 1
              &lt;/div&gt;
              &lt;div&gt;
                  Line 2
              &lt;/div&gt;
              &lt;div&gt;
                  Line 3
              &lt;/div&gt;
              &lt;div&gt;
                  Line 4
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-footer"&gt;
              Footer
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>