Product Cards

Bootstrap 5 Product Cards

Responsive Product Cards built with the latest Bootstrap 5. Lots of examples of different designs for eCommerce components.


Basic example

...
Believing is seeing

Apple pro display XDR

Pro Display XDR$5,999
Pro stand$999
Vesa Mount Adapter$199
Total$7,197.00

          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">
                  <div class="card text-black">
                    <i class="fab fa-apple fa-lg pt-3 pb-1 px-3"></i>
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/3.jpg"
                      class="card-img-top"
                      alt="..."
                    />
                    <div class="card-body">
                      <div class="text-center">
                        <h5 class="card-title">Believing is seeing</h5>
                        <p class="text-muted mb-4">Apple pro display XDR</p>
                      </div>
                      <div>
                        <div class="d-flex justify-content-between">
                          <span>Pro Display XDR</span><span>$5,999</span>
                        </div>
                        <div class="d-flex justify-content-between">
                          <span>Pro stand</span><span>$999</span>
                        </div>
                        <div class="d-flex justify-content-between">
                          <span>Vesa Mount Adapter</span><span>$199</span>
                        </div>
                      </div>
                      <div class="d-flex justify-content-between total font-weight-bold mt-4">
                        <span>Total</span><span>$7,197.00</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Product comparison template

...

iPhone X

Starting at $399
Quick Look
5.8″ Super Retina HD display1
  • Wide
  • Telephoto
2x Optical zoom range
Capacity
64GB 256GB 0
...

iPhone 11

Starting at $499
Quick Look
6.1″ Liquid Retina HD display1
  • Wide
2x Optical zoom range
Capacity
64GB 128GB 256GB
...

iPhone 11 Pro

Starting at $599
Quick Look
5.8″ Super Retina HD display1
  • Wide
  • Telephoto
4x Optical zoom range
Capacity
64GB 256GB 512GB

          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row">
                <div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
                  <div class="card text-black">
                    <img
                      src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-product-cards/img1.jpg"
                      class="card-img-top"
                      alt="..."
                    />
                    <div class="card-body">
                      <div class="text-center mt-1">
                        <h4 class="card-title">iPhone X</h4>
                        <h6 class="text-primary mb-1 pb-3">Starting at $399</h6>
                      </div>

                      <div class="text-center">
                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Quick Look</h5>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">5.8″</span>
                          <span>Super Retina HD display1</span>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">
                            <i class="fas fa-camera-retro"></i>
                          </span>
                          <ul class="list-unstyled mb-0">
                            <li aria-hidden="true">—</li>
                            <li>Wide</li>
                            <li>Telephoto</li>
                            <li aria-hidden="true">—</li>
                          </ul>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">2x</span>
                          <span>Optical zoom range</span>
                        </div>

                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Capacity</h5>
                        </div>

                        <div class="d-flex flex-column mb-4 lead">
                          <span class="mb-2">64GB</span>
                          <span class="mb-2">256GB</span>
                          <span style="color: transparent;">0</span>
                        </div>
                      </div>

                      <div class="d-flex flex-row">
                        <button
                          type="button"
                          class="btn btn-primary flex-fill me-1"
                          data-mdb-ripple-color="dark"
                        >
                          Learn more
                        </button>
                        <button type="button" class="btn btn-danger flex-fill ms-1">Buy now</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                  <div class="card text-black">
                    <img
                      src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-product-cards/img2.jpg"
                      class="card-img-top"
                      alt="..."
                    />
                    <div class="card-body">
                      <div class="text-center mt-1">
                        <h4 class="card-title">iPhone 11</h4>
                        <h6 class="text-primary mb-1 pb-3">Starting at $499</h6>
                      </div>

                      <div class="text-center">
                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Quick Look</h5>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">6.1″</span>
                          <span>Liquid Retina HD display1</span>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">
                            <i class="fas fa-camera-retro"></i>
                          </span>
                          <ul class="list-unstyled mb-0">
                            <li aria-hidden="true">Ultra Wide</li>
                            <li>Wide</li>
                            <li aria-hidden="true">—</li>
                            <li aria-hidden="true">—</li>
                          </ul>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">2x</span>
                          <span>Optical zoom range</span>
                        </div>

                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Capacity</h5>
                        </div>

                        <div class="d-flex flex-column mb-4 lead">
                          <span class="mb-2">64GB</span>
                          <span class="mb-2">128GB</span>
                          <span>256GB</span>
                        </div>
                      </div>

                      <div class="d-flex flex-row">
                        <button
                          type="button"
                          class="btn btn-primary flex-fill me-1"
                          data-mdb-ripple-color="dark"
                        >
                          Learn more
                        </button>
                        <button type="button" class="btn btn-danger flex-fill ms-1">Buy now</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                  <div class="card text-black">
                    <img
                      src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-product-cards/img3.jpg"
                      class="card-img-top"
                      alt="..."
                    />
                    <div class="card-body">
                      <div class="text-center mt-1">
                        <h4 class="card-title">iPhone 11 Pro</h4>
                        <h6 class="text-primary mb-1 pb-3">Starting at $599</h6>
                      </div>

                      <div class="text-center">
                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Quick Look</h5>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">5.8″</span>
                          <span>Super Retina HD display1</span>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">
                            <i class="fas fa-camera-retro"></i>
                          </span>
                          <ul class="list-unstyled mb-0">
                            <li aria-hidden="true">Ultra Wide</li>
                            <li>Wide</li>
                            <li>Telephoto</li>
                            <li aria-hidden="true">—</li>
                          </ul>
                        </div>

                        <div class="d-flex flex-column mb-4">
                          <span class="h1 mb-0">4x</span>
                          <span>Optical zoom range</span>
                        </div>

                        <div class="p-3 mx-n3 mb-4" style="background-color: #eff1f2;">
                          <h5 class="mb-0">Capacity</h5>
                        </div>

                        <div class="d-flex flex-column mb-4 lead">
                          <span class="mb-2">64GB</span>
                          <span class="mb-2">256GB</span>
                          <span>512GB</span>
                        </div>
                      </div>

                      <div class="d-flex flex-row">
                        <button
                          type="button"
                          class="btn btn-primary flex-fill me-1"
                          data-mdb-ripple-color="dark"
                        >
                          Learn more
                        </button>
                        <button type="button" class="btn btn-danger flex-fill ms-1">Buy now</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Ecommerce category product list page

Quant trident shirts
310
100% cotton Light weight Best finish
Unique design For men Casual

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

$13.99

$20.99
Free shipping
Quant olap shirts
289
100% cotton Light weight Best finish
Unique design For men Casual

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

$14.99

$21.99
Free shipping
Quant ruybi shirts
145
100% cotton Light weight Best finish
Unique design For women Casual

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

$17.99

$25.99
Free shipping

          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row justify-content-center mb-3">
                <div class="col-md-12 col-xl-10">
                  <div class="card shadow-0 border rounded-3">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-12 col-lg-3 col-xl-3 mb-4 mb-lg-0">
                          <div class="bg-image hover-zoom ripple rounded ripple-surface">
                            <img
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(4).jpg"
                              class="w-100"
                            />
                            <a href="#!">
                              <div class="hover-overlay">
                                <div
                                  class="mask"
                                  style="background-color: rgba(253, 253, 253, 0.15);"
                                ></div>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-xl-6">
                          <h5>Quant trident shirts</h5>
                          <div class="d-flex flex-row">
                            <div class="text-danger mb-1 me-2">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                            </div>
                            <span>310</span>
                          </div>
                          <div class="mt-1 mb-0 text-muted small">
                            <span>100% cotton</span>
                            <span class="text-primary"> • </span>
                            <span>Light weight</span>
                            <span class="text-primary"> • </span>
                            <span>Best finish<br /></span>
                          </div>
                          <div class="mb-2 text-muted small">
                            <span>Unique design</span>
                            <span class="text-primary"> • </span>
                            <span>For men</span>
                            <span class="text-primary"> • </span>
                            <span>Casual<br /></span>
                          </div>
                          <p class="text-truncate mb-4 mb-md-0">
                            There are many variations of passages of Lorem Ipsum available, but the
                            majority have suffered alteration in some form, by injected humour, or
                            randomised words which don't look even slightly believable.
                          </p>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3 border-sm-start-none border-start">
                          <div class="d-flex flex-row align-items-center mb-1">
                            <h4 class="mb-1 me-1">$13.99</h4>
                            <span class="text-danger"><s>$20.99</s></span>
                          </div>
                          <h6 class="text-success">Free shipping</h6>
                          <div class="d-flex flex-column mt-4">
                            <button class="btn btn-primary btn-sm" type="button">Details</button>
                            <button class="btn btn-outline-primary btn-sm mt-2" type="button">
                              Add to wishlist
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row justify-content-center mb-3">
                <div class="col-md-12 col-xl-10">
                  <div class="card shadow-0 border rounded-3">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-12 col-lg-3 col-xl-3 mb-4 mb-lg-0">
                          <div class="bg-image hover-zoom ripple rounded ripple-surface">
                            <img
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(4).jpg"
                              class="w-100"
                            />
                            <a href="#!">
                              <div class="hover-overlay">
                                <div
                                  class="mask"
                                  style="background-color: rgba(253, 253, 253, 0.15);"
                                ></div>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-xl-6">
                          <h5>Quant olap shirts</h5>
                          <div class="d-flex flex-row">
                            <div class="text-danger mb-1 me-2">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                            </div>
                            <span>289</span>
                          </div>
                          <div class="mt-1 mb-0 text-muted small">
                            <span>100% cotton</span>
                            <span class="text-primary"> • </span>
                            <span>Light weight</span>
                            <span class="text-primary"> • </span>
                            <span>Best finish<br /></span>
                          </div>
                          <div class="mb-2 text-muted small">
                            <span>Unique design</span>
                            <span class="text-primary"> • </span>
                            <span>For men</span>
                            <span class="text-primary"> • </span>
                            <span>Casual<br /></span>
                          </div>
                          <p class="text-truncate mb-4 mb-md-0">
                            There are many variations of passages of Lorem Ipsum available, but the
                            majority have suffered alteration in some form, by injected humour, or
                            randomised words which don't look even slightly believable.
                          </p>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3 border-sm-start-none border-start">
                          <div class="d-flex flex-row align-items-center mb-1">
                            <h4 class="mb-1 me-1">$14.99</h4>
                            <span class="text-danger"><s>$21.99</s></span>
                          </div>
                          <h6 class="text-success">Free shipping</h6>
                          <div class="d-flex flex-column mt-4">
                            <button class="btn btn-primary btn-sm" type="button">Details</button>
                            <button class="btn btn-outline-primary btn-sm mt-2" type="button">
                              Add to wishlist
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row justify-content-center">
                <div class="col-md-12 col-xl-10">
                  <div class="card shadow-0 border rounded-3">
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-12 col-lg-3 col-xl-3 mb-4 mb-lg-0">
                          <div class="bg-image hover-zoom ripple rounded ripple-surface">
                            <img
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(5).jpg"
                              class="w-100"
                            />
                            <a href="#!">
                              <div class="hover-overlay">
                                <div
                                  class="mask"
                                  style="background-color: rgba(253, 253, 253, 0.15);"
                                ></div>
                              </div>
                            </a>
                          </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-xl-6">
                          <h5>Quant ruybi shirts</h5>
                          <div class="d-flex flex-row">
                            <div class="text-danger mb-1 me-2">
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                              <i class="fa fa-star"></i>
                            </div>
                            <span>145</span>
                          </div>
                          <div class="mt-1 mb-0 text-muted small">
                            <span>100% cotton</span>
                            <span class="text-primary"> • </span>
                            <span>Light weight</span>
                            <span class="text-primary"> • </span>
                            <span>Best finish<br /></span>
                          </div>
                          <div class="mb-2 text-muted small">
                            <span>Unique design</span>
                            <span class="text-primary"> • </span>
                            <span>For women</span>
                            <span class="text-primary"> • </span>
                            <span>Casual<br /></span>
                          </div>
                          <p class="text-truncate mb-4 mb-md-0">
                            There are many variations of passages of Lorem Ipsum available, but the
                            majority have suffered alteration in some form, by injected humour, or
                            randomised words which don't look even slightly believable.
                          </p>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3 border-sm-start-none border-start">
                          <div class="d-flex flex-row align-items-center mb-1">
                            <h4 class="mb-1 me-1">$17.99</h4>
                            <span class="text-danger"><s>$25.99</s></span>
                          </div>
                          <h6 class="text-success">Free shipping</h6>
                          <div class="d-flex flex-column mt-4">
                            <button class="btn btn-primary btn-sm" type="button">Details</button>
                            <button class="btn btn-outline-primary btn-sm mt-2" type="button">
                              Add to wishlist
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

          @media (max-width: 767.98px) { .border-sm-start-none { border-left: none !important; } }
        

Ecommerce product listing

Today's Combo Offer

x4

laptop

Laptops

$1099

HP Notebook
$999

Available: 6

Today's Combo Offer

x2

image

Laptops

$1199

HP Envy
$1099

Available: 7

Today's Combo Offer

x3

image

Laptops

$1399

Toshiba B77
$1299

Available: 5


          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row">
                <div class="col-md-12 col-lg-4 mb-4 mb-lg-0">
                  <div class="card">
                    <div class="d-flex justify-content-between p-3">
                      <p class="lead mb-0">Today's Combo Offer</p>
                      <div
                        class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
                        style="width: 35px; height: 35px;"
                      >
                        <p class="text-white mb-0 small">x4</p>
                      </div>
                    </div>
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/4.jpg"
                      class="card-img-top"
                      alt="laptop"
                    />
                    <div class="card-body">
                      <div class="d-flex justify-content-between">
                        <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
                        <p class="small text-danger"><s>$1099</s></p>
                      </div>

                      <div class="d-flex justify-content-between mb-3">
                        <h5 class="mb-0">HP Notebook</h5>
                        <h5 class="text-dark mb-0">$999</h5>
                      </div>

                      <div class="d-flex justify-content-between mb-2">
                        <p class="text-muted mb-0">Available: <span class="fw-bold">6</span></p>
                        <div class="ms-auto text-warning">
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                  <div class="card">
                    <div class="d-flex justify-content-between p-3">
                      <p class="lead mb-0">Today's Combo Offer</p>
                      <div
                        class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
                        style="width: 35px; height: 35px;"
                      >
                        <p class="text-white mb-0 small">x2</p>
                      </div>
                    </div>
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/7.jpg"
                      class="card-img-top"
                      alt="image"
                    />
                    <div class="card-body">
                      <div class="d-flex justify-content-between">
                        <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
                        <p class="small text-danger"><s>$1199</s></p>
                      </div>

                      <div class="d-flex justify-content-between mb-3">
                        <h5 class="mb-0">HP Envy</h5>
                        <h5 class="text-dark mb-0">$1099</h5>
                      </div>

                      <div class="d-flex justify-content-between mb-2">
                        <p class="text-muted mb-0">Available: <span class="fw-bold">7</span></p>
                        <div class="ms-auto text-warning">
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="far fa-star"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                  <div class="card">
                    <div class="d-flex justify-content-between p-3">
                      <p class="lead mb-0">Today's Combo Offer</p>
                      <div
                        class="bg-info rounded-circle d-flex align-items-center justify-content-center shadow-1-strong"
                        style="width: 35px; height: 35px;"
                      >
                        <p class="text-white mb-0 small">x3</p>
                      </div>
                    </div>
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/5.jpg"
                      class="card-img-top"
                      alt="image"
                    />
                    <div class="card-body">
                      <div class="d-flex justify-content-between">
                        <p class="small"><a href="#!" class="text-muted">Laptops</a></p>
                        <p class="small text-danger"><s>$1399</s></p>
                      </div>

                      <div class="d-flex justify-content-between mb-3">
                        <h5 class="mb-0">Toshiba B77</h5>
                        <h5 class="text-dark mb-0">$1299</h5>
                      </div>

                      <div class="d-flex justify-content-between mb-2">
                        <p class="text-muted mb-0">Available: <span class="fw-bold">5</span></p>
                        <div class="ms-auto text-warning">
                          <i class="fa fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star"></i>
                          <i class="fas fa-star-half-alt"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Quick buy product card

Dell Xtreme 270

Laptops

Rated 4.0/5


$3,999

#### 8787

VISA Platinum


Cancel

          <section style="background-color: #eee;">
            <div class="container py-5">
              <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6 col-xl-4">
                  <div class="card" style="border-radius: 15px;">
                    <div
                      class="bg-image hover-overlay ripple ripple-surface ripple-surface-light"
                      data-mdb-ripple-color="light"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/12.jpg"
                        style="border-top-left-radius: 15px; border-top-right-radius: 15px;"
                        class="img-fluid"
                        alt="image"
                      />
                      <a href="#!">
                        <div class="mask"></div>
                      </a>
                    </div>
                    <div class="card-body pb-0">
                      <div class="d-flex justify-content-between">
                        <div>
                          <p><a href="#!" class="text-dark">Dell Xtreme 270</a></p>
                          <p class="small text-muted">Laptops</p>
                        </div>
                        <div>
                          <div class="d-flex flex-row justify-content-end mt-1 mb-4 text-danger">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                          </div>
                          <p class="small text-muted">Rated 4.0/5</p>
                        </div>
                      </div>
                    </div>
                    <hr class="my-0" />
                    <div class="card-body pb-0">
                      <div class="d-flex justify-content-between">
                        <p><a href="#!" class="text-dark">$3,999</a></p>
                        <p class="text-dark">#### 8787</p>
                      </div>
                      <p class="small text-muted">VISA Platinum</p>
                    </div>
                    <hr class="my-0" />
                    <div class="card-body">
                      <div class="d-flex justify-content-between align-items-center pb-2 mb-1">
                        <a href="#!" class="text-dark fw-bold">Cancel</a>
                        <button type="button" class="btn btn-primary">Buy now</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Bestsellers listing

Bestsellers


          <section style="background-color: #eee;">
            <div class="text-center container py-5">
              <h4 class="mt-4 mb-5"><strong>Bestsellers</strong></h4>

              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4">
                  <div class="card">
                    <div
                      class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
                      data-mdb-ripple-color="light"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100">
                            <h5><span class="badge bg-primary ms-2">New</span></h5>
                          </div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">$61.99</h6>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="card">
                    <div
                      class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
                      data-mdb-ripple-color="light"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(4).jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100">
                            <h5><span class="badge bg-success ms-2">Eco</span></h5>
                          </div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">$61.99</h6>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="card">
                    <div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100">
                            <h5><span class="badge bg-danger ms-2">-10%</span></h5>
                          </div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">
                        <s>$61.99</s><strong class="ms-2 text-danger">$50.99</strong>
                      </h6>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4">
                  <div class="card">
                    <div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(23).jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100">
                            <h5>
                              <span class="badge bg-success ms-2">Eco</span
                              ><span class="badge bg-danger ms-2">-10%</span>
                            </h5>
                          </div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">
                        <s>$61.99</s><strong class="ms-2 text-danger">$50.99</strong>
                      </h6>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="card">
                    <div
                      class="bg-image hover-zoom ripple ripple-surface ripple-surface-light"
                      data-mdb-ripple-color="light"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(17).jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100"></div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">$61.99</h6>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="card">
                    <div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">
                      <img
                        src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg"
                        class="w-100"
                      />
                      <a href="#!">
                        <div class="mask">
                          <div class="d-flex justify-content-start align-items-end h-100">
                            <h5>
                              <span class="badge bg-primary ms-2">New</span
                              ><span class="badge bg-success ms-2">Eco</span
                              ><span class="badge bg-danger ms-2">-10%</span>
                            </h5>
                          </div>
                        </div>
                        <div class="hover-overlay">
                          <div
                            class="mask"
                            style="background-color: rgba(251, 251, 251, 0.15);"
                          ></div>
                        </div>
                      </a>
                    </div>
                    <div class="card-body">
                      <a href="" class="text-reset">
                        <h5 class="card-title mb-3">Product name</h5>
                      </a>
                      <a href="" class="text-reset">
                        <p>Category</p>
                      </a>
                      <h6 class="mb-3">
                        <s>$61.99</s><strong class="ms-2 text-danger">$50.99</strong>
                      </h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Product cards listing

Product listing


          <section style="background-color: #eee;">
            <div class="container py-5">
              <h4 class="text-center mb-5"><strong>Product listing</strong></h4>

              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(1).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$123</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(2).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$239</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(3).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$147</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-lg-4 col-md-12 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded ripple-surface">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(4).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$83</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(5).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$106</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="bg-image hover-zoom ripple shadow-1-strong rounded">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/new/img(6).jpg"
                      class="w-100"
                    />
                    <a href="#!">
                      <div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
                        <div class="d-flex justify-content-start align-items-start h-100">
                          <h5><span class="badge bg-light pt-2 ms-3 mt-3 text-dark">$58</span></h5>
                        </div>
                      </div>
                      <div class="hover-overlay">
                        <div
                          class="mask"
                          style="background-color: rgba(253, 253, 253, 0.15);"
                        ></div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </section>