Bootstrap 5 product listing component by Vivek Kumar Output View Horizontal Vertical HTML CSS JS Tidy <section class="my-lg-14 my-8"> <div class="container"> <div class="row"> <div class="col-12 mb-6"> <h3 class="mb-0">Popular Products</h3> </div> </div> <div class="row g-4 row-cols-lg-5 row-cols-2 row-cols-md-3"> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <div class="position-absolute top-0 start-0"> <span class="badge bg-danger">Sale</span> </div> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Snack & Munchies</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Haldiram's Sev Bhujia</a></h2> <div> <small class="text-warning"> <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> </small> <span class="text-muted small">4.5(149)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$18</span> <span class="text-decoration-line-through text-muted">$24</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <div class="position-absolute top-0 start-0"> <span class="badge bg-success">14%</span> </div> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Bakery & Biscuits</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">NutriChoice Digestive</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">4.5 (25)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div><span class="text-dark">$24</span></div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Bakery & Biscuits</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Cadbury 5 Star Chocolate</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">5 (469)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$32</span> <span class="text-decoration-line-through text-muted">$35</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> <div class="position-absolute top-0 start-0"> <span class="badge bg-danger">Hot</span> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Snack & Munchies</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Onion Flavour Potato</a></h2> <div class="text-warning"> <small> <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> <i class="bi bi-star"></i> </small> <span class="text-muted small">3.5 (456)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$3</span> <span class="text-decoration-line-through text-muted">$5</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Instant Food</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Salted Instant Popcorn</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">4.5 (39)</span> </div> <div class="d-flex justify-content-between mt-4"> <div> <span class="text-dark">$13</span> <span class="text-decoration-line-through text-muted">$18</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <div class="position-absolute top-0 start-0"> <span class="badge bg-danger">Sale</span> </div> <a href="#!"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Dairy, Bread & Eggs</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Blueberry Greek Yogurt</a></h2> <div> <small class="text-warning"> <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> </small> <span class="text-muted small">4.5 (189)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$18</span> <span class="text-decoration-line-through text-muted">$24</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Dairy, Bread & Eggs</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Britannia Cheese Slices</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">5 (345)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div><span class="text-dark">$24</span></div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Instant Food</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Kellogg's Original Cereals</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">4 (90)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$32</span> <span class="text-decoration-line-through text-muted">$35</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Snack & Munchies</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Slurrp Millet Chocolate</a></h2> <div class="text-warning"> <small> <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> </small> <span class="text-muted small">4.5 (67)</span> </div> <div class="d-flex justify-content-between align-items-center mt-3"> <div> <span class="text-dark">$3</span> <span class="text-decoration-line-through text-muted">$5</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> <div class="col"> <div class="card card-product"> <div class="card-body"> <div class="text-center position-relative"> <a href="#"><img src="https://cdn.pixabay.com/photo/2014/12/21/23/36/bag-575652_1280.png" alt="Grocery Ecommerce Template" class="mb-3 img-fluid"></a> <div class="card-product-action"> <a href="#!" class="btn-action" data-bs-toggle="modal" data-bs-target="#quickViewModal"> <i class="bi bi-eye" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Quick View" data-bs-original-title="Quick View"></i> </a> <a href="#" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist" data-bs-original-title="Wishlist"><i class="bi bi-heart"></i></a> <a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare" data-bs-original-title="Compare"><i class="bi bi-arrow-left-right"></i></a> </div> </div> <div class="text-small mb-1"> <a href="#!" class="text-decoration-none text-muted"><small>Dairy, Bread & Eggs</small></a> </div> <h2 class="fs-6"><a href="#" class="text-inherit text-decoration-none">Amul Butter - 500 g</a></h2> <div class="text-warning"> <small> <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> <i class="bi bi-star"></i> </small> <span class="text-muted small">3.5 (89)</span> </div> <div class="d-flex justify-content-between mt-4"> <div> <span class="text-dark">$13</span> <span class="text-decoration-line-through text-muted">$18</span> </div> <div> <a href="#!" class="btn btn-primary btn-sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> Add </a> </div> </div> </div> </div> </div> </div> </div> </section> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bootstrap 5 product listing page component, Build on bootstrap 5 and HTML. Features Add to button, Sale badge, rating and price. Catagory Bootstrap Tags Bootstrap5 E-Commerce Product Card Resource Add External Stylesheets and Script <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
