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
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
