Bootstrap 5 Responsive Ecommerce Product Card List
Bootstrap 5 Responsive Ecommerce Product Card List
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<title>Bootstrap 5 - Ecommerce Product Card List</title>
</head>
<body>
<div class="container bg-white">
<nav class="navbar navbar-expand-md navbar-light bg-white">
<div class="container-fluid p-0"> <a class="navbar-brand text-uppercase fw-800" href="#"><span
class="border-red pe-2">New</span>Product</a> <button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#myNav" aria-controls="myNav" aria-expanded="false"
aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
<div class="collapse navbar-collapse" id="myNav">
<div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">All</a> <a
class="nav-link" href="#">Women's</a> <a class="nav-link" href="#">Men's</a> <a
class="nav-link" href="#">Kid's</a> <a class="nav-link" href="#">Accessories</a> <a
class="nav-link" href="#">Cosmetics</a> </div>
</div>
</div>
</nav>
<div class="row">
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-red">sale</div>
<div class="title pt-4 pb-1">Winter Sweater</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 60.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-black">out of stock</div>
<div class="title pt-4 pb-1">Denim Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 55.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-green">new</div>
<div class="title pt-4 pb-1"> Empire Waist Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 70.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="title pt-4 pb-1">Pinafore Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 60.0</div>
</div>
</div>
<div class="row">
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-red">sale</div>
<div class="title pt-4 pb-1">Winter Sweater</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 60.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-black">out of stock</div>
<div class="title pt-4 pb-1">Denim Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 55.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="title pt-4 pb-1"> Empire Waist Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 70.0</div>
</div>
<div
class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
<div class="product"> <img
src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="">
<ul class="d-flex align-items-center justify-content-center list-unstyled icons">
<li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
<li class="icon mx-3"><span class="far fa-heart"></span></li>
<li class="icon"><span class="fas fa-shopping-bag"></span></li>
</ul>
</div>
<div class="tag bg-green">new</div>
<div class="title pt-4 pb-1">Pinafore Dresses</div>
<div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span
class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span>
<span class="fas fa-star"></span> </div>
<div class="price">$ 60.0</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif
}
body {
background-color: bisque
}
.container {
margin: 30px auto
}
.navbar-nav .nav-link {
color: #000 !important;
padding: 0.5rem 0rem !important;
border-color: transparent;
margin-left: 1.5rem;
transition: none
}
.navbar .navbar-toggler:focus {
box-shadow: none
}
.navbar-nav .nav-link.active,
.border-red {
border-bottom: 3px solid #b71c1c
}
.navbar-nav .nav-link:hover {
border-bottom: 3px solid #b71c1c
}
.container .product-item {
min-height: 450px;
border: none;
overflow: hidden;
position: relative;
border-radius: 0
}
.container .product-item .product {
width: 100%;
height: 350px;
position: relative;
overflow: hidden;
cursor: pointer
}
.container .product-item .product img {
width: 100%;
height: 100%;
object-fit: cover
}
.container .product-item .product .icons .icon {
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.6s ease;
transform: rotate(180deg);
cursor: pointer
}
.container .product-item .product .icons .icon:hover {
background-color: #b71c1c;
color: #fff
}
.container .product-item .product .icons .icon:nth-last-of-type(3) {
transition-delay: 0.2s
}
.container .product-item .product .icons .icon:nth-last-of-type(2) {
transition-delay: 0.15s
}
.container .product-item .product .icons .icon:nth-last-of-type(1) {
transition-delay: 0.1s
}
.container .product-item:hover .product .icons .icon {
transform: translateY(-60px)
}
.container .product-item .tag {
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 500;
position: absolute;
top: 10px;
left: 20px;
padding: 0 0.4rem
}
.container .product-item .title {
font-size: 0.95rem;
letter-spacing: 0.5px
}
.container .product-item .fa-star {
font-size: 0.65rem;
color: goldenrod
}
.container .product-item .price {
margin-top: 10px;
margin-bottom: 10px;
font-weight: 600
}
.fw-800 {
font-weight: 800
}
.bg-green {
background-color: #208f20 !important;
color: #fff
}
.bg-black {
background-color: #1f1d1d;
color: #fff
}
.bg-red {
background-color: #bb3535;
color: #fff
}
@media (max-width: 767.5px) {
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
background-color: #b71c1c;
color: #fff !important
}
.navbar-nav .nav-link {
border: 3px solid transparent;
margin: 0.8rem 0;
display: flex;
border-radius: 10px;
justify-content: center
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
This snippet presents a visually appealing and responsive ecommerce product card list, expertly crafted with Bootstrap 5. Designed to showcase your products in a clean and organized manner, this component offers a seamless shopping experience. With its customizable features and lightweight code, it's a versatile addition to any online store
Key Features:
- Responsive Design: Ensures optimal viewing on all devices, from desktops to smartphones.
- Clean and Customizable CSS: Easily tailor the appearance to match your brand's style.
- Lightweight Code: Optimizes page loading times for a faster and smoother user experience.
Implementation:
- Include Bootstrap 5 CSS and JavaScript: Add the necessary Bootstrap files to your HTML page.
- Create the Product Card Structure: Use Bootstrap's grid system and card components to build the basic product card layout.
Latest Snippets
View All
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
