Bootstrap 3 columns in one row same height

Question

I'm building a Webapp with AngularJS and Bootstrap 3 and SASS. I want all columns in a row to have the same height. A Bootply is supplied.

The problem is that I don't know the size of the subset in the items array since it comes from the server and the size of the subset effects the height of the column. Therefore I don't want to use a fixed height for all columns. The solution should also work for multiple screen-sizes (col-xs to col-lg) I feel like this can be handled purely with CSS rather than with JavaScript hacking.

I ng-repeat over a list that looks like this:

Javascript:

  $scope.items = [{
    name: 'one',
    subset: [{name: 'one-one'}, {name: 'one-two'},{name: 'one-three'}]
  }, {
    name: 'two',
    subset: [{name: 'two-one'}, {name: 'two-two'}]
  }];

HTML:

<div class="row">
  <div ng-repeat="item in items">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
      <div class="menu-item">
        <div class="menu-item-header">
          <span>{{item.name}}</span>
        </div>
        <div ng-repeat="subitem in item.subset">
          <span>{{subitem.name}}</span>  
        </div>
        <button class="btn btn-default">Do Something</button>
        </div>
      </div>
   </div>
</div>

CSS:

.menu-item {
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}

.menu-item-header {
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
}

Answer 1

Flexbox could do this, but that's not well supported.

Your best bet is to fake it. Instead of worrying about getting the columns the same height, work with the element that is containing all the columns. By default, it will expand to accommodate the child with the greatest height.

Then, apply a sneaky background image that gives the illusion of borders or background colours:

.row{
    background: url(sneaky.png) repeat-y;
}

This trick has been around for a while: http://alistapart.com/article/fauxcolumns

UPDATE WITH FLEXBOX

Using Flexbox for equal height columns is trivial. Apply flexbox to the parent:

<div class="row" style="display:flex;">

And.... you're done. All children will have the same height I added a class called col to each column div with a background colour and a margin so you can tell they are all equal height.

http://www.bootply.com/120891