I have a <div>
that contains many columns, one after the other. In each column I'm showing an image. I've set my design so that only 6 columns are shown per row using row-col-X
. Once I reach 6 images in one row, the other images show in the next row as expected. However, they show unorganized, and I need them to show as I explain in the following images (it's easier to explain with images):
Here's my code (I'm using Bootstrap 4)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-cols-lg-7 row-cols-md-7 row-cols-sm-7 row-cols-7">
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
<a href="#" class="col"><img src="images/card.svg" alt="Card"></a>
</div>