Bootstrap align Columns of different height - css

Question

I would like to be able to align an unknown number of columns with an unknown height. Since I do not know how many columns there will be it is not ideal for me to use multiple rows to split up the columns. I can almost achieve the outcome I want by using list items.
The one thing I don't like about using list items is that once the page hits the resize point I am left with the extra space on the right hand side. The top set is using list items and the bottom set is using bootstrap's col's. The problem with the bottom set is when the col's break they don't align to the furthest left position.
Is there a way to achieve this using bootstrap?
<div class="container-fluid">
<div class="row">
<ul>
<li class="list-item" style="height:200px;"></li>
<li class="list-item" style="height:120px;"></li>
<li class="list-item" style="height:100px;"></li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:200px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:120px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box" style="height:100px"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="box"></div>
</div>
</div>
</div>
jsFiddle

Answer 1

Try this :
.row {
display: flex;
flex-wrap: wrap;
}

Answer 2

Another way to handle it, and still maintain Bootstrap's responsive columns is to use CSS to force a clear:left every x columns. For example, when you have 4 columns in a row:
.row > .col-md-3:nth-child(4n+1) {
clear: left;
}
http://codeply.com/go/OHg5vB0Xg3

Answer 3

You really don't need bootstrap to handle this. Here's one potential solution using inline-block. I imagine it's compatible with bootstrap.
.box {
margin: 15px;
width: 80px;
background-color: grey;
display: inline-block;
vertical-align: top;
}
<div>
<div class="box" style="height: 120px;"></div>
<div class="box" style="height: 20px;"></div>
<div class="box" style="height: 40px;"></div>
<div class="box" style="height: 60px;"></div>
<div class="box" style="height: 80px;"></div>
</div>
<div>
<div class="box" style="height: 20px;"></div>
<div class="box" style="height: 60px;"></div>
<div class="box" style="height: 80px;"></div>
</div>

Answer 4

Yes! There is a way. And it's a css-only solution. Try this:
.col-xs-6:nth-of-type(2n+3),
.col-xs-4:nth-of-type(3n+4),
.col-xs-3:nth-of-type(4n+5),
.col-xs-2:nth-of-type(6n+7),
.col-xs-1:nth-of-type(12n+13)
{
clear: both;
}
#media (min-width: 768) {
[class*="col-xs"][class*="col-sm"],
[class*="col-xs"][class*="col-md"],
[class*="col-xs"][class*="col-lg"]
{
clear: none;
}
.col-sm-6:nth-of-type(2n+3),
.col-sm-4:nth-of-type(3n+4),
.col-sm-3:nth-of-type(4n+5),
.col-sm-2:nth-of-type(6n+7),
.col-sm-1:nth-of-type(12n+13)
{
clear: both;
}
}
#media (min-width: 992) {
[class*="col-sm"][class*="col-md"],
[class*="col-sm"][class*="col-lg"]
{
clear: none;
}
.col-md-6:nth-of-type(2n+3),
.col-md-4:nth-of-type(3n+4),
.col-md-3:nth-of-type(4n+5),
.col-md-2:nth-of-type(6n+7),
.col-md-1:nth-of-type(12n+13)
{
clear: both;
}
}
#media (min-width: 1200) {
[class*="col-md"][class*="col-lg"]
{
clear: none;
}
.col-lg-6:nth-of-type(2n+3),
.col-lg-4:nth-of-type(3n+4),
.col-lg-3:nth-of-type(4n+5),
.col-lg-2:nth-of-type(6n+7),
.col-lg-1:nth-of-type(12n+13) {
clear: both;
}
}
// use .col-nobreak class to deactivate this fix
.col-nobreak {
clear: none !important;
}
First of all we begin with the column type for the smallest resolution (< 768) (col-xs-*). If the row breaks for the several column widths, we set the css property clear to clear: both.
In the next step we reset for the first breakpoint the css property clear with clear: both for all columns, which has a column width for higher resolutions (all columns width additional col-sm-x,col-md-x,col-lg-x) and set the break of one column-row for the col-sm-* type.
And so on...
With the .col-nobreak class you can deactivate the css hack.
You have to fulfill these requirements:
The cols for the parent row container must have the same size
The cols for the parent row must have the same html tag type (div, secion)