This code creates a product card using Bootstrap 5. It showcases product details attractively. It’s helpful for displaying items with images, titles, ratings, prices, and an ‘Add to Cart’ button. This layout enhances product presentation on websites.
You can use this code to build stylish product cards on your website, enhancing the visual appeal of your product listings. The benefit lies in creating an engaging and user-friendly interface, improving the overall shopping experience for your visitors.
How to Create Product Card Using Bootstrap 5
1. Begin by adding the necessary CSS links for Bootstrap and Bootstrap Icons in the <head> section of your HTML file.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css'>
2. Create a container div using the Bootstrap class ‘container m-4’ to set the margin. Inside it, build a card with the ‘card’ class and customize its appearance with ‘border-0 rounded-0 shadow’.
Within the card, include the product image, title, rating stars, and bookmark icon. Utilize Bootstrap’s grid system for alignment.
Use the grid system again to showcase the product price and the ‘Add to Cart’ button at the bottom of the card.
<div class="container m-4">
<div class="card border-0 rounded-0 shadow" style="width: 18rem;">
<img src="https://codingyaar.com/wp-content/uploads/bag-scaled.jpg" class="card-img-top rounded-0" alt="...">
<div class="card-body mt-3 mb-3">
<div class="row">
<div class="col-10">
<h4 class="card-title">Product title</h4>
<p class="card-text">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
(123)
</p>
</div>
<div class="col-2">
<i class="bi bi-bookmark-plus fs-2"></i>
</div>
</div>
</div>
<div class="row align-items-center text-center g-0">
<div class="col-4">
<h5>$129</h5>
</div>
<div class="col-8">
<a href="#" class="btn btn-dark w-100 p-3 rounded-0 text-warning">ADD TO CART</a>
</div>
</div>
</div>
</div>
<p class="mt-5 text-center">Get a step-by-step written explanation here: <a href="https://codingyaar.com/product-card-bootstrap-html" target="_blank">Bootstrap 5 Product Card</a> </p>
<p class="mt-5 text-center">Get a step-by-step video explanation here: <a href="https://youtu.be/4jXWB-E_MqI" target="_blank">Bootstrap 5 Product Card</a> </p>
Feel free to customize the code further based on your needs. Adjust colors, fonts, and sizes to match your website’s theme.
That’s all! hopefully, you have successfully created a Product Card Using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Portfolio Filter Gallery Bootstrap 5- Bootstrap 5 Table with Pagination and Search and Sorting
- Dynamic Cascading Dropdown Bootstrap
- Bootstrap 5 Product Details Page
- Bootstrap 5 Step Wizard Example
- Bootstrap Progress Bar Animation on Page Load
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.