Bootstrap grid with different height columns

Question

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:


   
      
         
         
         Gas station safety             
         
      
   
   
      
         
         
         Wild squirrels love sunflower seeds                
         
      
   
   
      
         
         
         Bobcats fighting in tree               
         
      
   
   
      
         
         
         Head on train crash                
         
      
   
   
      
         
         
         Spelling pregnant is hard              
         
      
   
   
      
         
         
         Kid rolls car while singing                
         
      
   
   
      
         
         
         USA unemployment map timeline              
         
      
   
   
      
         
         
         Guy trolls car dealership              
         
      
   
   
      
         
         
         Red Dead Redemption 2 Trailer              
         
      
   
   
      
         
         
         Nintendo Switch preview                
         
      
   
   
      
         
         
         You're dying               
         
      
   
   
      
         
         
         University goalie signed by Canucks

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.

drosam · Accepted 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

Bootstrap grid with different height columns

Answers (1)

Related Questions