Product Card Using Bootstrap 5

Product Card Using Bootstrap 5
Code Snippet:Product Card Bootstrap 5
Author:
Published: January 4, 2024
Last Updated: January 4, 2024
Downloads: 734
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...