0

I want to achieve a 'grid' like display for my bootstrap app where the height of each row is the same (And the height is the defined by the tallest content).

Goal

However, am getting with the following code (JSFiddle Link ) is 

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Row 1 Col 1
    </div>
    <div class="col-sm-4">
      This is some long tex that has a greater height than the rest
    </div>
    <div class="col-sm-4">
      Row 1 Col 3
    </div>
    <div class="col-sm-4">
      Row 2 Col 1
    </div>
    <div class="col-sm-4">
      Row 2 Col 2
    </div>
    <div class="col-sm-4">
      Row 3 Col 3
    </div>`
  </div>
</div>

Output

This is a simplified version of my app. In my real app, I get a big array of data back and I actually generate the HTML with React programatically, I I can not simply manually break up .row for every 3 col-md-4.

ErnieKev
  • 2,831
  • 5
  • 21
  • 35

0 Answers0