title: How do I align the button to the bottom of the row/column in bootstrap?
body: <p>I have row with 4 columns each with a heading and some text. Most of the columns have a similar amount of text and push the button in their column down to match the rest of the columns. However one column has less text and doesn't push the button down far enough. </p>
  
  <p><img src="https://i.stack.imgur.com/5PPev.png" alt="enter image description here"></p>
  
  <p>Is there a way to align the button to the bottom of the row? I would like to achieve this and keep it responsive at the same time so it looks like this when the screen is smaller:</p>
  
  <p><img src="https://i.stack.imgur.com/HPu4R.png" alt="enter image description here"></p>
  
  <p>This is my markup of the page just now:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;text here&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &gt;&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;text here&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &gt;&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;less text here&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default more" href="#" role="button"&gt;View details &gt;&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;text here&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#" role="button"&gt;View details &gt;&gt;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>