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

Answer 1

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 2

Try this :

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

Answer 3

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)

Answer 4

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