kjdion84 kjdion84 - 1 month ago 9
CSS Question

Bootstrap grid with different height columns

I'm trying to get a grid working for video thumbnails. I want there to be 4 columns on desktop, and 2 columns on tablet/mobile.

Each column contains a thumbnail and the title of the video. The problem is that some of the video titles are longer than others, causing the grid to become messed up. I just want to make it so that the columns can be any height and the number of columns per row won't get messed up from the floating.

I read another answer on this site, but it is not working for me at all.

Here is my HTML code:

<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/gas-station-safety-19.jpg" alt="Gas station safety" class="img-responsive">
Gas station safety
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/wild-squirrels-love-sunflower-seeds-17.jpg" alt="Wild squirrels love sunflower seeds" class="img-responsive">
Wild squirrels love sunflower seeds
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/bobcats-fighting-in-tree-22.jpg" alt="Bobcats fighting in tree" class="img-responsive">
Bobcats fighting in tree
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/head-on-train-crash-20.jpg" alt="Head on train crash" class="img-responsive">
Head on train crash
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/spelling-pregnant-is-hard-2.jpg" alt="Spelling pregnant is hard" class="img-responsive">
Spelling pregnant is hard
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/kid-rolls-car-while-singing-1.jpg" alt="Kid rolls car while singing" class="img-responsive">
Kid rolls car while singing
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/usa-unemployment-map-timeline-6.jpg" alt="USA unemployment map timeline" class="img-responsive">
USA unemployment map timeline
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/guy-trolls-car-dealership-5.jpg" alt="Guy trolls car dealership" class="img-responsive">
Guy trolls car dealership
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/red-dead-redemption-2-trailer-9.jpg" alt="Red Dead Redemption 2 Trailer" class="img-responsive">
Red Dead Redemption 2 Trailer
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/nintendo-switch-preview-7.jpg" alt="Nintendo Switch preview" class="img-responsive">
Nintendo Switch preview
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/you-re-dying-12.jpg" alt="You're dying" class="img-responsive">
You're dying
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 index-col">
<div class="well">
<a href="#">
<img src="http://localhost/me/loldie/images/thumbnails/university-goalie-signed-by-canucks-10.jpg" alt="University goalie signed by Canucks" class="img-responsive">
University goalie signed by Canucks
</a>
</div>
</div>
</div>


Here is my CSS code:

.index-col a {
display: block;
}
.index-col a img {
margin-bottom: 10px;
}

@media (max-width: 991px) {
.index-col:nth-child(2n) {
border: 1px solid red;
}

.index-col:nth-child(2n)::after {
content: '';
display: block;
clear: both;
}
}

@media (min-width: 992px) {
.index-col:nth-child(4n) {
border: 1px solid green;
}

.index-col:nth-child(4n)::after {
content: '';
display: block;
clear: both;
}
}


The problem is with the ::after code. It doesn't seem to be clearing the float at all. It has no effect whatsoever.

Any help would be appreciated.

Answer

Try to set the clear: both to the first element in the next row instead of the ::after pseudo-element of the last element in the row.

.index-col a {
    display: block;
}
.index-col a img {
    margin-bottom: 10px;
}

.index-col:nth-child(4n+1) {
        clear: both;
    }

@media (max-width: 991px) {
    .index-col:nth-child(2n) {
        border: 1px solid red;
    }

    .index-col:nth-child(2n+1) {
        clear: both;
    }
}

@media (min-width: 992px) {
    .index-col:nth-child(4n) {
        border: 1px solid green;
    }

    .index-col:nth-child(4n+1) {
        clear: both;
    }
}

Here you have a working example