How do I make footer line up at the bottom of Bootstrap cards component
<p>Im trying to work on some CSS and I am using Bootstrap and the component "cards"</p>

<p>When you have them in a class called "card-deck" you can group them to all be the same height. But when one is longer than the other the actual footers in the cards themselves do not align to the bottom of the card.</p>

<p>Is there a way to easily force the footer to the bottom on a shorter card?</p>

<p><a href="https://jsfiddle.net/rhhy9cjz/" rel="noreferrer" title="FIDDLE">MY FIDDLE</a></p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
  padding-top: 50px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" /&gt;

&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="card-deck-wrapper"&gt;
      &lt;div class="card-deck"&gt;
        &lt;div class="card text-xs-center"&gt;
          &lt;div class="card-header"&gt;
            Featured
          &lt;/div&gt;
          &lt;div class="card-block"&gt;
            &lt;h4 class="card-title"&gt;Special title treatment&lt;/h4&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="card-footer text-muted"&gt;
            2 days ago
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card text-xs-center"&gt;
          &lt;div class="card-header"&gt;
            Featured
          &lt;/div&gt;
          &lt;div class="card-block"&gt;
            &lt;h4 class="card-title"&gt;Special title treatment&lt;/h4&gt;
            &lt;p class="card-text"&gt;Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada
              magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Donec sed
              odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="card-footer text-muted"&gt;
            2 days ago
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>