Bootstrap 3 stretch elements in row to same size [duplicate] - html

Question

I have a row of thumbnails like this:
I want them to be equal height though. This is my code:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
</div>
Is this possible? Like we see in bootstrap4 here is equal height cards:
http://www.codeply.com/render/KrUO8QpyXP#

Answer 1

I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.
Thumbnails with flexbox
You can also do more with the position of child elements.
Also see,
make Bootstrap columns all the same height

Answer 2

It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.
Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?