Bootstrap 5 Code For eCommerce Product Cards

This code snippet creates a stylish product card for an IKEA vase, showcasing its name, image, rating, available colors, and an option to add it to the cart, all styled with Bootstrap for responsiveness and aesthetics.

<div class="height d-flex justify-content-center align-items-center">
<div class="card p-3">
<div class="d-flex justify-content-between align-items-center">
<div class="mt-2">
<h4 class="text-uppercase">IKEA</h4>
<div class="mt-5">
<h5 class="text-uppercase mb-0">Blanda Matte</h5>
<h1 class="main-heading mt-0">Decorative Vase</h1>
<div class="d-flex flex-row user-ratings">
<div class="ratings">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<h6 class="text-muted ml-1">Rating: 4/5</h6>
</div>
</div>
</div>
<div class="image">
<!-- Ensure you have rights to use the image or it is royalty-free -->
<img src="https://i.imgur.com/MGorDUi.png" width="200" alt="Elegant IKEA Vase">
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-2 mb-2">
<span>Choose Your Color</span>
<div class="colors d-flex">
<!-- Example color representation; you should replace these with actual color classes or styles -->
<span class="dot bg-primary"></span>
<span class="dot bg-secondary"></span>
<span class="dot bg-success"></span>
<span class="dot bg-danger"></span>
</div>
</div>
<p>An ideal accent piece whether you're at the office or sprucing up your home decor.</p>
<button class="btn btn-danger">Add to Cart</button>
</div>
</div>

Step2: Styling Responsive Product Card

This CSS code styles a webpage with a product card, featuring a specific background, layout adjustments for responsiveness, color-coded ratings, and clickable color options for customization, enhancing the visual appeal and user interaction.

body{
background-color:#dce3f0;
}
.height{
height:100vh;
}
.card{
width:350px;
height:370px;
}
.image{
position:absolute;
right:12px;
top:10px;
}
.main-heading{
font-size:40px;
color:red !important;
}
.ratings i{
color:orange;
}
.user-ratings h6{
margin-top:2px;
}
.colors{
display:flex;
margin-top:2px;
}
.colors span{
width:15px;
height:15px;
border-radius:50%;
cursor:pointer;
display:flex;
margin-right:6px;
}
.colors span:nth-child(1) {
background-color:red;
}
.colors span:nth-child(2) {
background-color:blue;
}
.colors span:nth-child(3) {
background-color:yellow;
}
.colors span:nth-child(4) {
background-color:purple;
}
.btn-danger{
height:48px;
font-size:18px;
}

Step3: CDNs