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
Responsive Blog Grid with Tailwind CSS
User-Friendly Travel Booking Form in Bootstrap 5
Responsive CSS3 Pricing Table with Hover Animation
Responsive Contact Us Forms in Bootstrap 5
Notification UI Design with Navbar in Bootstrap 5
Interactive Social Media Buttons with CSS and JS
Lightweight FAQ Accordion Component with CSS
Responsive Registration Form Page with Image in Tailwind
Timeline Roadmap Example in Tailwind CSS
Notification Page Design Examples in Bootstrap 5
Need Help Support Page with Search in Bootstrap 5
Responsive Get In Touch Contact Form in Tailwind CSS
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
