Bootstrap align Columns of different height

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?

enter image description here

<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>

• Drew: But using this solution you dont have even padding on the left and right sides as the page gets smaller, once the right box breaks to the next row you are left with its width of white space on the right side.
• recursive: I'm not sure i understand your scenario, but if you require padding,you can add it to the parent element.

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)

• Valentin Palkovic: I have created a pen for this issue. codepen.io/valentinpalkovic/pen/PqPzzB