How do I align the button to the bottom of the row/column in bootstrap?

Question

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.

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:

This is my markup of the page just now:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>less text here</p>
      <p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
  </div>
</div>

Answer 1

There are several ways this can be done:

• Give the containers a fixed height. This is not ideal as in order for it to look nice you will have to set different heights for each of the breakpoints.
  You will also need to set the button to position: absolute, bottom: 0 and add some bottom padding/margin.

• Use some javascript to match the heights using something like match height. You will also need to set the positions as in the previous point.

• Add an additional row and repeat your buttons within 4 new cols. Then show or hide your original buttons and the new ones using bootstraps responsive classes.