Let’s dive into a straightforward guide on how to construct a visually appealing and functional Product Card Using Bootstrap 5. This tutorial will walk you through the essential steps, from setting up your HTML structure to incorporating Bootstrap’s styling components.
Step 1: Include Bootstrap 5 and Bootstrap Icons
First, include Bootstrap 5 CSS and Bootstrap Icons CSS in the <head> section of your HTML document to leverage Bootstrap’s styling and icon library.
<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'>
Step 2: Create the HTML Structure
Construct the basic HTML structure for the product card. This will include a container, a card element, an image, card body and footer section.
<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>
With these steps, you’ve successfully built a responsive product card using Bootstrap 5. Experiment with different Bootstrap components and styling options to tailor the card to your specific needs.
