title: Bootstrap 3 columns in one row same height
body: <p>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 href="http://www.bootply.com/120862" rel="nofollow">A Bootply</a> is supplied.</p>
  
  <p>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. </p>
  
  <p>I ng-repeat over a list that looks like this:</p>
  
  <h1>Javascript:</h1>
  
  <pre><code>  $scope.items = [{
      name: 'one',
      subset: [{name: 'one-one'}, {name: 'one-two'},{name: 'one-three'}]
    }, {
      name: 'two',
      subset: [{name: 'two-one'}, {name: 'two-two'}]
    }];
  </code></pre>
  
  <h1>HTML:</h1>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div ng-repeat="item in items"&gt;
      &lt;div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"&gt;
        &lt;div class="menu-item"&gt;
          &lt;div class="menu-item-header"&gt;
            &lt;span&gt;{{item.name}}&lt;/span&gt;
          &lt;/div&gt;
          &lt;div ng-repeat="subitem in item.subset"&gt;
            &lt;span&gt;{{subitem.name}}&lt;/span&gt;  
          &lt;/div&gt;
          &lt;button class="btn btn-default"&gt;Do Something&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>.menu-item {
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px;
  }
  
  .menu-item-header {
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
  }
  </code></pre>