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

I have found this solution, you can check demo here —

http://getbootstrap.com.vn/examples/equal-height-columns/

It uses addon class for your .row, and items in that row gets equal height. Works in IE 10+, which is ok for me now.

/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

/*
 * Styles copied from the Grid example to make grid rows & columns visible.
 */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

/*
 * Callout styles copied from Bootstrap's main docs.
 */
/* Common styles for all types */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  background-color: #fff;
  border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  background-color: #fcf8f2;
  border-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

Answer 2

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