Bootstrap 3 Grid how to make nested columns all the same height as the largest

Question

I am trying to get bootstrap 3 to ensure all the columns are the same height across the page.

I can get this to work when I have 3 columns much like the example here: How can I make Bootstrap columns all the same height?

The issue I am having is that I want to have nested columns and these nested columns will need to be x% each equalling up to 100% of the height of the largest parent column. I can't seem to find a solution to nested columns.

So I need the nested columns to fill their parent column depending on the height percent provided to the nested columns css.

The css height percentage will be provided via jquery .css()

.row {
    display: table;
}

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

<div class="container">
<div class="row">
  <div class="col-sm-3 ">
    <img src="http://placehold.it/250x450">
  </div>
  <div class="col-sm-3 " style="background-color: grey">
    <div class="row">
      <div class="col-sm-12 " style="background-color: green">30%</div>
    </div>
    <div class="row">
      <div class="col-sm-12 " style="background-color: blue">20%</div>
    </div>
    <div class="row">
      <div class="col-sm-12 " style="background-color: red">50%</div>
    </div>
  </div>
  <div class="col-sm-3 " style="background-color: grey">
    <div class="row">
      <div class="col-xs-12 " style="background-color: green">25%</div>
    </div>
    <div class="row">
      <div class="col-xs-12 " style="background-color: orange">75%</div>
    </div>
  </div>
  <div class="col-sm-3 " style="background-color: blue">
    100%
  </div>
</div>

score 0 · Answer 1 · answered Sep 18 '17 at 13:15

0

Please try "display: flex;" property to the parent.

answered Sep 18 '17 at 13:15

Satheesh Kumar

2,205
1
16
31

Display flex helps with the width, but not with the height. – CassOwary Sep 18 '17 at 13:26
Here is the simple demo for the "Flex" property in codepen. https://codepen.io/satheesh_design/pen/qPbdKV – Satheesh Kumar Sep 18 '17 at 13:36
Thanks for the example, but the problem I am trying to solve is when a column has a nested column. – CassOwary Sep 18 '17 at 13:49
I have updated my codepen link with one layer of the nested column. Please have a look on it. – Satheesh Kumar Sep 18 '17 at 13:59

score 0 · Answer 2 · answered Sep 18 '17 at 14:25

@Satheesh Kumar thanks for pointing me in the right direction. Flex was definitely what I wanted. Here is a link to what I was trying to achieve.

https://codepen.io/anon/pen/XeXXpQ

<div class="equal-height-container">
    <div class="first">
      <img src="http://placehold.it/250x450">
    </div>

    <div class="second">
      <div class="second-a">A</div>
      <div class="second-b">B</div>
      <div class="second-c">C</div>
    </div>
    <div class="third">

    </div>
  </div>



    .equal-height-container {
          max-width: 900px;
          margin: 0 auto;
          display: flex;
        }
    .first {
      background-color: #FFF;
      padding: 20px;
      flex: 1;
    }

    .second {
      background-color: yellow;
      flex: 2;
      display: flex;
      flex-direction: column;
    }

    .third {
      background-color: yellow;
      padding: 20px;
      flex: 2;
    }
    .second-a {
      background-color: #c0dbe2;
      flex: 2.5;
    }

    .second-b {
      background-color: #cdf1c3;
      flex: 1;
    }

    .second-c {
      background-color: red;
      flex: 1;
    }

Bootstrap 3 Grid how to make nested columns all the same height as the largest

2 Answers2