Bootstrap Product Card Grid

A product list in cards: 1 per row on a phone, 2 on a tablet and 4 on a big screen. Each card has an image, a sale badge, the price, the stars and a button.

<div class="container py-3">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
    <div class="col">
      <div class="card h-100 position-relative">
        <span class="badge text-bg-danger position-absolute top-0 start-0 m-2">Sale</span>
        <img src="images/photo.jpg" class="card-img-top" alt="Product 1">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Cotton T-shirt</h2>
          <div class="text-warning mb-2" aria-label="4 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i></div>
          <p class="mb-3"><span class="fw-bold">$19</span> <span class="text-body-secondary text-decoration-line-through small">$29</span></p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 2">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Running shoes</h2>
          <div class="text-warning mb-2" aria-label="5 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
          <p class="mb-3 fw-bold">$59</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 3">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Backpack</h2>
          <div class="text-warning mb-2" aria-label="3 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
          <p class="mb-3 fw-bold">$35</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 4">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Water bottle</h2>
          <div class="text-warning mb-2" aria-label="4 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></div>
          <p class="mb-3 fw-bold">$12</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

The preview window is narrow, so the cards are stacked, and you can scroll inside the preview. On a wide screen there are four cards in a row.

How it works

• row-cols-1 row-cols-sm-2 row-cols-lg-4 controls the number of cards in a line.
• The sale badge uses position-absolute top-0 start-0 inside a card with position-relative.
• d-flex flex-column with mt-auto on the button keeps the buttons at the same level.
• Each star group has an aria-label, because the stars are only icons.

• Previous Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.