Create a responsive grid of six cards

Description: Show six cards: 1 per row on small screens, 2 per row from sm and 3 per row from lg.

Hint:

• Use row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 and card h-100.

---

Solution

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 1</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 2</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 3</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 4</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 5</h5><p class="card-text">Text</p></div></div></div>
    <div class="col"><div class="card h-100"><div class="card-body"><h5 class="card-title">Card 6</h5><p class="card-text">Text</p></div></div></div>
  </div>
</div>

How it works

• row-cols-* sets the number of columns per row, so each column needs only the class col.
• h-100 makes the cards in a row the same height.

Read Grid: Gutters, Offset and Order and Cards.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.