This Bootstrap 5 code snippet helps you to create a Product Details Page for your e-commerce website. It displays product details with images and descriptions, allowing users to view and purchase the product easily. It’s helpful for showcasing and selling products on a website.
You can use this code on your e-commerce website to showcase product details effectively. It helps enhance the user experience by providing an organized and visually appealing product presentation. This, in turn, can lead to higher sales and customer engagement on your online store.
How to Create Product Details Page Using Bootstrap 5
1. First of all, load the Bootstrap 5 and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2. Create the basic HTML structure for your product details page. Use the following code as a template for organizing your content. Make sure to adjust the image sources, product details, and descriptions to match your specific products.
<div class="container my-5">
<div class="row">
<div class="col-md-5">
<div class="main-img">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2015/07/24/18/40/model-858753_960_720.jpg" alt="ProductS">
<div class="row my-3 previews">
<div class="col-md-3">
<img class="w-100" src="https://cdn.pixabay.com/photo/2015/07/24/18/40/model-858754_960_720.jpg" alt="Sale">
</div>
<div class="col-md-3">
<img class="w-100" src="https://cdn.pixabay.com/photo/2015/07/24/18/38/model-858749_960_720.jpg" alt="Sale">
</div>
<div class="col-md-3">
<img class="w-100" src="https://cdn.pixabay.com/photo/2015/07/24/18/39/model-858751_960_720.jpg" alt="Sale">
</div>
<div class="col-md-3">
<img class="w-100" src="https://cdn.pixabay.com/photo/2015/07/24/18/37/model-858748_960_720.jpg" alt="Sale">
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="main-description px-2">
<div class="category text-bold">
Category: Women
</div>
<div class="product-title text-bold my-3">
Black dress for Women
</div>
<div class="price-area my-4">
<p class="old-price mb-1"><del>$100</del> <span class="old-price-discount text-danger">(20% off)</span></p>
<p class="new-price text-bold mb-1">$80</p>
<p class="text-secondary mb-1">(Additional tax may apply on checkout)</p>
</div>
<div class="buttons d-flex my-5">
<div class="block">
<a href="#" class="shadow btn custom-btn ">Wishlist</a>
</div>
<div class="block">
<button class="shadow btn custom-btn">Add to cart</button>
</div>
<div class="block quantity">
<input type="number" class="form-control" id="cart_quantity" value="1" min="0" max="5" placeholder="Enter email" name="cart_quantity">
</div>
</div>
</div>
<div class="product-details my-4">
<p class="details-title text-color mb-1">Product Details</p>
<p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat excepturi odio recusandae aliquid ad impedit autem commodi earum voluptatem laboriosam? </p>
</div>
<div class="row questions bg-light p-3">
<div class="col-md-1 icon">
<i class="fa-brands fa-rocketchat questions-icon"></i>
</div>
<div class="col-md-11 text">
Have a question about our products at E-Store? Feel free to contact our representatives via live chat or email.
</div>
</div>
<div class="delivery my-4">
<p class="font-weight-bold mb-0"><span><i class="fa-solid fa-truck"></i></span> <b>Delivery done in 3 days from date of purchase</b> </p>
<p class="text-secondary">Order now to get this product delivery</p>
</div>
<div class="delivery-options my-4">
<p class="font-weight-bold mb-0"><span><i class="fa-solid fa-filter"></i></span> <b>Delivery options</b> </p>
<p class="text-secondary">View delivery options here</p>
</div>
</div>
</div>
</div>
<div class="container similar-products my-4">
<hr>
<p class="display-5">Similar Products</p>
<div class="row">
<div class="col-md-3">
<div class="similar-product">
<img class="w-100" src="https://source.unsplash.com/gsKdPcIyeGg" alt="Preview">
<p class="title">Lovely black dress</p>
<p class="price">$100</p>
</div>
</div>
<div class="col-md-3">
<div class="similar-product">
<img class="w-100" src="https://source.unsplash.com/sg_gRhbYXhc" alt="Preview">
<p class="title">Lovely Dress with patterns</p>
<p class="price">$85</p>
</div>
</div>
<div class="col-md-3">
<div class="similar-product">
<img class="w-100" src="https://source.unsplash.com/gJZQcirK8aw" alt="Preview">
<p class="title">Lovely fashion dress</p>
<p class="price">$200</p>
</div>
</div>
<div class="col-md-3">
<div class="similar-product">
<img class="w-100" src="https://source.unsplash.com/qbB_Z2pXLEU" alt="Preview">
<p class="title">Lovely red dress</p>
<p class="price">$120</p>
</div>
</div>
</div>
</div>
</div>
3. The CSS code in the template provides styling to make your product details page visually appealing. Customize the CSS to match your brand’s design and color scheme. You can change fonts, colors, and layout to suit your needs.
.text-bold {
font-weight: 800;
}
text-color {
color: #0093c4;
}
/* Main image - left */
.main-img img {
width: 100%;
}
/* Preview images */
.previews img {
width: 100%;
height: 140px;
}
.main-description .category {
text-transform: uppercase;
color: #0093c4;
}
.main-description .product-title {
font-size: 2.5rem;
}
.old-price-discount {
font-weight: 600;
}
.new-price {
font-size: 2rem;
}
.details-title {
text-transform: uppercase;
font-weight: 600;
font-size: 1.2rem;
color: #757575;
}
.buttons .block {
margin-right: 5px;
}
.quantity input {
border-radius: 0;
height: 40px;
}
.custom-btn {
text-transform: capitalize;
background-color: #0093c4;
color: white;
width: 150px;
height: 40px;
border-radius: 0;
}
.custom-btn:hover {
background-color: #0093c4 !important;
font-size: 18px;
color: white !important;
}
.similar-product img {
height: 400px;
}
.similar-product {
text-align: left;
}
.similar-product .title {
margin: 17px 0px 4px 0px;
}
.similar-product .price {
font-weight: bold;
}
.questions .icon i {
font-size: 2rem;
}
.questions-icon {
font-size: 2rem;
color: #0093c4;
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
/* Make preview images responsive */
.previews img {
width: 100%;
height: auto;
}
}
Feel free to add more features or functionality to your product details page. For example, you can integrate a shopping cart system or include customer reviews.
That’s all! hopefully, you have successfully created the Product Details Page using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
19+ Bootstrap 5 Multi-step Form with Search Samples & Tutorial
Simple Vertical Timeline in Bootstrap
Bootstrap 5 Navbar with Profile Picture
Bootstrap 5 Card with Shadow on Hover
Stop Watch with Milliseconds Using Bootstrap 5
Bootstrap 5 Buttons with Icon and Text Tutorial & Demo
Bootstrap 5 Thank You Page Template
Bootstrap 5 Number Counter Animation
Bootstrap Datepicker Today Date Selected
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.