title: How to align buttons to bottom of column?
body: <p>I have a very simple design in Bootstrap 4, based on the <a href="https://getbootstrap.com/docs/4.0/examples/jumbotron/" rel="nofollow noreferrer">Jumbotron Example</a>. My problem is that the buttons are all on different heights, depending on the preceding text. In the example, the provided text is almost of identical length, so the difference is not as noticable. However, I would like to align all the buttons on the bottom of the columns, so that they are all aligned. Is this possible? And if so, how?</p>
  
  <hr>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Topic 1&lt;/h2&gt;
          &lt;p&gt;Very short paragraph!&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-danger" href="#" role="button"&gt;View more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Topic 2&lt;/h2&gt;
          &lt;p&gt;Very short paragraph!&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-danger" href="#" role="button"&gt;View more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Topic 3&lt;/h2&gt;
          &lt;p&gt;Very long paragraph, which completely throws the perceived design off and makes me want to quite HTML forever!&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-success" href="#" role="button"&gt;View more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>What I have tried so far:</strong></p>
  
  <ol>
  <li><p>Adding the <code>align-self-end</code> class to the <code>&lt;p&gt;</code> surrounding the button. This was suggested in the <a href="https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment" rel="nofollow noreferrer">official documentation</a>, but it did nothing.</p></li>
  <li><p>Adding the <code>align-self-end</code> class to the <code>col</code> element. This moved the entire column down, causing the headings not to be aligned anymore. This basically flips the problem around.</p></li>
  <li><p>Creating another <code>row</code> element, effectively moving every button to a new row. While this got me the exact layout I need on desktop and tablet views, it detaches the paragraphs from the buttons in the mobile view. While this may be a workaround, it seems more like a hack. </p></li>
  </ol>