Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page?
If you've managed to achieve this with 3 columns, like the example provided here, great job!
However, the challenge arises when dealing with nested columns that need to occupy a certain percentage of their parent column's height. Finding a solution for nested columns seems tricky.
The goal is for nested columns to fill their parent container based on a specified percentage height set by CSS using 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>