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 Contact Us Section in Tailwind CSS
File Upload Form with Tailwind CSS
Bootstrap 4 Login Form with Social Media Integration
Simple Catalog Card Template Using Bootstrap 4 with Hover Effect
Product Card Grid with Images and Pricing in Tailwind
Customer Testimonial Grid in Dark Mode with Tailwind CSS
E-commerce Product Card in Detail Template with Bootstrap 4
Dual Design Registration Form in Bootstrap 4
Bootstrap 4 Responsive Categories Card with Hover Effects
Bootstrap 4 Toggle Switch with Custom Text Labels
Bootstrap 5 Features Catalog with Use Cases
Fancy User Login Form in Bootstrap 5 with Background Gradient Color
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
