How to make bottom element in Bootstrap thumbnails affixed to the bottom? - html

Question

I have three Bootstrap thumbnails which vary in height because of their respective content. How am I able to make the bottom most element aligned with the bottom most element of all three of the thumbnails? So I want all of the buttons to align with the bottom most button.
Here is what I have so far:
<div class="container" id="section-6">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.blancocountycat.org/images/Ear-Tipped-Cat.jpg" data-holder-rendered="true">
<div class="caption text-center">
<h3>test</h3>
<p>The most popular front-end framework for developing responsive, mobile first projects on the web. The most popular front-end framework for developing responsive, mobile first projects on the web.</p> MEET OUR PEOPLE
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.hillspet.com/images/en-us/seniorCatBrainAging.jpg" data-holder-rendered="true">
<div class="caption text-center">
<h3>test</h3>
<p>The most popular front-end framework for developing responsive, mobile first projects on the web.</p> SUPPORT THE CAUSE
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="https://media4.giphy.com/media/mIPlgBgw9dgS4/200_s.gif" data-holder-rendered="true">
<div class="caption text-center">
<h3>Our History</h3>
<p>The most popular front-end framework for developing responsive, mobile firstework for developing responsive, mobile first projects on the web.</p> EXPLORE OUR HISTORY TIMELINE
</div>
</div>
</div>
</div>
</div>
Link to JSFiddle:
https://jsfiddle.net/obliviga/qze6g77g/
P.S. I would prefer the solution to work in IE8 or greater.

Answer 1

I just gave min and max height to <p> with overflow. See if this is suitable to you.
p.middle-text {
min-height: 130px;
max-height: 130px;
overflow: hidden;
}
https://www.xtendify.com/en/snippets/bootstrap/9-equal-column-height

Answer 2

This isn't the most ideal solution depending on how you plan on implementing your site over all as it needs to take into account any changes in the amount of text that will ultimately sit in the p tag above the href element. The margins will have to be adjusted in order for the links to remain aligned across the bottom. I added these classes to your second and third p blocks class="bottom-even-2nd" and class="bottom-even-3rd".
I also changed the col-sm-6 col-md-4 you have since Bootstap works across a 12 column grid otherwise the last block will be pushed below the second when the window is decreased.