Fix Bootstrap thumbnail size when a title its too long - html

Question

I'm using the class="thumbnail" and class="caption" from bootstrap to generate this presentations.
Problem is that when the Title it's 1 row longer for one of the cards it becomes bigger and it brakes my col-md-3 or col-md-4
How do I make sure that all the cards will have the same size as long as the Title will extend on two rows.
Notice how the height increases as the title gets longer
Thank You!

Answer 1

You need to truncate you title see the example:
$('button').on('click', function() {
$('p').toggleClass('ellipses');
});
.ellipses {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:120px">
<button>Toggle Ellipses</button>
<p class="ellipses">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>

Answer 2

You can use Flexbox http://v4-alpha.getbootstrap.com/getting-started/flexbox/ but read the details about browser support. More details about how to use Flexbox Grids can be found here http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
An example
http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 3

It's terrible Bootstrap mechanics and here are no bulit-in solution to fix it.
You can chose one of next methods to fix it:
You can set fixed height of title block or whole container.
You can calculate height of largest container and set this height to all containers using JS.
You can use one of JS libraries to make pretty mosaic grid(like this). One of libraries to do it - Masonry.