I am attempting to create a responsive grid with thumbnails using Bootstrap and Knockout. Here is the current HTML code:
<div class="row">
<!-- ko if: toys().length == 0 -->
<div>No toys in category</div>
<!-- /ko -->
<!-- ko foreach: toys-->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
<a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
<img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
<span data-bind="text: name"></span>
</a>
</div>
<!-- /ko -->
</div>
While I do manage to get the grid looking correct at times, more often than not (depending on image sizes and lengths of item names) it ends up looking like this: https://i.sstatic.net/lfNta.jpg.
How can I properly align these items? One simple solution would be to set a fixed height for the images, but that distorts their proportions. Additionally, I would like the images to resize proportionally with height adjustment, while restricting text to only two lines per image.
You can view a live demo here.