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

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)