title: How to align the button at the bottom with Bootstrap 4?
body: <p>I am using version Bootstrap <a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/" rel="noreferrer">4.0.0</a></p>
  
  <p>Here's an example:: <a href="https://getbootstrap.com/docs/4.0/examples/pricing/" rel="noreferrer">https://getbootstrap.com/docs/4.0/examples/pricing/</a></p>
  
  <p>How can I make a button always aligned to the <strong>bottom</strong>?</p>
  
  <p>Here is the jsfiddle: <a href="https://jsfiddle.net/34shLh1m/" rel="noreferrer">https://jsfiddle.net/34shLh1m/</a></p>
  
  <p>Code <strong>html</strong>:</p>
  
  <pre><code>&lt;div class="card-deck mb-3 text-center"&gt;
    &lt;div class="card mb-4 box-shadow"&gt;
      &lt;div class="card-header"&gt;
        &lt;h4 class="my-0 font-weight-normal"&gt;Free&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
        &lt;h1 class="card-title pricing-card-title"&gt;$0 &lt;small class="text-muted"&gt;/ mo&lt;/small&gt;&lt;/h1&gt;
        &lt;ul class="list-unstyled mt-3 mb-4"&gt;
          &lt;li&gt;10 users included&lt;/li&gt;
          &lt;li&gt;2 GB of storage&lt;/li&gt;
          &lt;li&gt;Email support&lt;/li&gt;
          &lt;li&gt;Help center access&lt;/li&gt;
          &lt;li&gt;Help center access&lt;/li&gt;
        &lt;/ul&gt;
        &lt;button type="button" class="btn btn-lg btn-block btn-outline-primary"&gt;Sign up for free&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card mb-4 box-shadow"&gt;
      &lt;div class="card-header"&gt;
        &lt;h4 class="my-0 font-weight-normal"&gt;Pro&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
        &lt;h1 class="card-title pricing-card-title"&gt;$15 &lt;small class="text-muted"&gt;/ mo&lt;/small&gt;&lt;/h1&gt;
        &lt;ul class="list-unstyled mt-3 mb-4"&gt;
          &lt;li&gt;20 users included&lt;/li&gt;
          &lt;li&gt;10 GB of storage&lt;/li&gt;
          &lt;li&gt;Priority email support&lt;/li&gt;
          &lt;li&gt;Help center access&lt;/li&gt;
        &lt;/ul&gt;
        &lt;button type="button" class="btn btn-lg btn-block btn-primary"&gt;Get started&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Photo:</strong></p>
  
  <p>I want to do something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HqfEB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HqfEB.png" alt="enter image description here"></a></p>