How to align button at bottom of row / column in bootstrap?

Question

I have a row with 4 columns with a heading and some text. Most columns have the same amount of text and press the button in their column down to fit the rest of the columns. However, one column has less text and does not push the button far enough.

Is there a way to align the button at the bottom of the line? 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 page layout:

<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 to do this:

• . , , , .
  position: absolute, bottom: 0 /.

• javascript , - . , .

• 4 col. , .

Answer 2

set min-height - , div,

.col-md-3{min-height:300px;}

Answer 3

col-md-3.