Bootstrap - rows of products of equal height, is there a better way?


This is the typical conundrum where product divs might have different heights, and so I’m using jQuery to size them all equally (to maxHeight which is the tallest div). But I don’t want to do this on mobile (which I’m defining as browser width < 768px), since only one product is displayed per row. If one product was really tall, it would create unnecessary spacing below all of them.

Code is below. It works, but feels a bit hacky. Is there a better way?

var ProdCatalog = {};
ProdCatalog.browserWidth = new Tracker.Dependency;

$(function () {
  $(window).on('resize', function () {

Template.landingPage.onCreated(function () {

Template.landingPage.onRendered(function () {
  this.autorun(() => {
    let maxHeight = 0;

    if ($(window).width() >= 768 && this.subscriptionsReady()) {
      Tracker.afterFlush(function () {
        this.$('.product').each(function () {
          maxHeight = Math.max(maxHeight, $(this).height());


  products: function () {
    return Products.find({});


Isn’t this something that display: flex was designed for?


I thought about it. Flexbox is fairly well supported now: (except IE10 needs different syntax)

I don’t want it totally flex though. On the largest breakpoint, right now it does 3 products across, and on tablets it does 2 across. I’m not sure if you can set breakpoint-related constraints like that with flexbox. (basically I know zilch about flexbox)


how exactly is flex going to solve this issue? Cause I dont see any relation here…


Flexbox has same height boxes built in via align-items: stretch;.
You can learn about Flexbox here.