0

I'd like to make my column elemements in bootstrap the height of the highest element in the dynamically generated row using bootstrap 3.

For example in this page: http://jsfiddle.net/kLa0jqrz/2/

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="LegendWell" class="well">
  <div id="LegendDiv" class="row">
    <div class="col-sm-6 col-md-4">
      <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
        <strong>Title 1</strong><br>
        Line 0<br/>
        Line 1<br/>
        Line 2<br/>
        Line 3<br/>
      </div>
    </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 2</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 3</strong><br/>
      Line 0<br/>
      Line 1<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 4</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div style="width:100%;padding:8px;margin-bottom:8px;margin-top:8px;border-style:solid;border-width:4px;">
      <strong>Title 5</strong><br/>
      Line 0<br/>
      Line 1<br/>
      Line 2<br/>
      Line 3<br/>
      Line 4<br/>
      Line 5<br/>
    </div>
  </div>
</div>
</body>

This will create divs of different heights, some of them in the same column, wasting space in other columns while it also looks awful.

I'd much rather have the divs in the same responsively created row to be the same height, so they are nicely aligned.

Is there a way to do this in BS3?

Edit: Apparently this is a duplicate.

However the answer suggests to use display: table for the row and display: table-cell for the columns.

As show in http://jsfiddle.net/kLa0jqrz/3/ this doesn't work. Another suggestion is to use flexbox. However I'd like to stick to bootstrap 3.

FalcoGer
  • 2,278
  • 1
  • 12
  • 34
  • Maybe a duplicate, but neither the flexbox answer nor the display: table solution work for me. – FalcoGer Dec 07 '18 at 12:35
  • Actual answer here:https://stackoverflow.com/questions/23287206/same-height-column-bootstrap-3-row-responsive – FalcoGer Dec 07 '18 at 12:46

0 Answers0