Grid - row columns

With row-cols-1 to row-cols-6 on the row, you set how many columns fit on one line, and the columns need no number of their own. This is the simplest way to build an even grid of images or cards. Below, two images fit on one line on phones, and four from a screen width of 768 pixels. With class=img-fluid, the images adjust to the width of their columns, and g-3 adds the gaps, see gutters.

Code

<div class="row row-cols-2 row-cols-md-4 g-3">
  <div class="col">[[File:DSC02166 363.jpg|class=img-fluid]]</div>
  <div class="col">[[File:DSC02166 363.jpg|class=img-fluid]]</div>
  <div class="col">[[File:DSC02166 363.jpg|class=img-fluid]]</div>
  <div class="col">[[File:DSC02166 363.jpg|class=img-fluid]]</div>
</div>

Result

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!