Equal Thumbnail Height In Bootstrap3

Is there any way to make one thumbnail the same height as another thumbnail?

Solution 1:

You need to create a javscript function that runs onload, catches all the thumbnails, checks which one has the highest height and then loops over the thumbnails to assign them the obtained height:

@fcalderan has a good solution in his answer: https://stackoverflow.com/a/9279339/2611451

function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
} 

$(document).ready(function() {   
    equalHeight($(".thumbnail")); 
});

I have updated your fiddle: https://jsfiddle.net/hbfu2b97/6/

UPDATE

To make the recipe link aligned to the bottom I have set the thumbnail as relative positioned and made the recipe link elements position absolute and align to buttom:

.thumbnail
{
  position:relative
}

.caption a
{
  position:absolute;
  bottom:1px
}

Share