Creating a product list page with Bootstrap is a great way to showcase products attractively and responsively. This code snippet helps you to create a product list page using Bootstrap 5. It displays products in a grid format with images, titles, prices, and ratings. Each product card includes icons for viewing, liking, and adding to the cart. It also features tags for sale, new items, and out-of-stock items.
The navigation bar allows filtering products by category, such as men’s and women’s clothing. This page is helpful for showcasing products attractively and responsively. The CSS styles enhance the layout and interactivity, ensuring a smooth user experience.
How to Create Product List Page Using Bootstrap 5
1. First, you need to include Bootstrap 5 and Font Awesome 5 in your project. Add the following CDN links in the <head> section of your HTML file:
<!-- Font Awesome 5 CSS --> <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'> <!-- Bootstrap 5 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"> <!-- Bootstrap 5 JS --> <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>
2. Next, add the following HTML code inside the <body> section. This code creates the navigation bar and product list:
<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>
To add more products, simply duplicate the product block within the .row container. Replace the image URL, title, tag, and price as needed.
3. To style the product list page, add the following CSS code inside a <style> tag in the <head> section or in a separate CSS file:
@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
}
}
That’s all! hopefully, you have successfully created a Bootstrap 5 Product List Page Example. If you have any questions or suggestions, feel free to comment below.
