Bootstrap 5 Product Card Design

bootstrap product card

Hello and welcome to today's tutorial. Today we are going to learn how to create simple e-commerce product cards using HTML, CSS, and Bootstrap 5 Framework. Product cards are the important elements of an e-commerce website. These components of the website help us to know about the features and benefits of a particular product. A nicely designed product card helps the website to be more visually appealing to visitors. We have provided the source code of this snippet below this article but before getting it please watch the video tutorial below. It will be helpful for you. Besides if you like our content, you can consider subscribing to our YouTube Channel as well.

Bootstrap Product Card Video Tutorial:

We hope you have gone through the video tutorial at least once. Online shopping is becoming a part of our everyday lives. You must have done it in the past. When you visit an e-commerce website, you must have seen the product cards. We have tried to make such kinds of cards in this project. The product cards of reputed e-commerce companies are very dynamic. Here we have made the basic type of product card. We used some components of the Bootstrap 5 framework to build it. For that, we had to use very little CSS. There are several components in a product card design. First of all, the image plays a vital part in product card design. The image should be high-quality and showcase the particular product in an attractive way. Then comes the title of the product, description, price, and call-to-action buttons. Before designing a product, one has to bear in mind that the card should be functional, engaging, and attractive enough to convert visitors to potential customers.

You May Also Like:

Bootstrap 5 Product Card Design [ Source Code ]:

First Create an HTML file and later a CSS file. Link the External CSS in your HTML File. Include the Bootstrap 5 CDN which we have shown in the above video tutorial. After that, Copy the code below and paste it into your file, then save the file. Test it in your browser and see if it's working or not. If the code doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Product Card bootstrap 5</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="products">
        <div class="container">
            <div class="row card-deck">
                <div class="col-lg-4">
                  <div class="card">
                    <img src="img/1.jpg" class="card-img-top" alt="Product 1">
                    <div class="card-body">
                      <h5 class="card-title">Product Name</h5>
                      <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore ad unde maxime sed quaerat harum recusandae beatae. Minus, totam. Fugit, ratione aliquid reiciendis autem fuga suscipit similique ad quo animi est? Omnis facere, quibusdam ipsa consequatur animi molestiae, officiis reiciendis sint vel at veritatis, voluptate natus id nihil laudantium expedita.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                          <button type="button" class="btn btn-sm">View</button>
                          <button type="button" class="btn btn-sm">Add to Cart</button>
                        </div>
                        <span class="price">$19.99</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="card">
                    <img src="img/2.jpg" class="card-img-top" alt="Product 2">
                    <div class="card-body">
                      <h5 class="card-title">Product Name</h5>
                      <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore ad unde maxime sed quaerat harum recusandae beatae. Minus, totam. Fugit, ratione aliquid reiciendis autem fuga suscipit similique ad quo animi est? Omnis facere, quibusdam ipsa consequatur animi molestiae, officiis reiciendis sint vel at veritatis, voluptate natus id nihil laudantium expedita.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                          <button type="button" class="btn btn-sm">View</button>
                          <button type="button" class="btn btn-sm">Add to Cart</button>
                        </div>
                        <span class="price">$159.99</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="card">
                    <img src="img/3.jpg" class="card-img-top" alt="Product 3">
                    <div class="card-body">
                      <h5 class="card-title">Product Name</h5>
                      <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore ad unde maxime sed quaerat harum recusandae beatae. Minus, totam. Fugit, ratione aliquid reiciendis autem fuga suscipit similique ad quo animi est? Omnis facere, quibusdam ipsa consequatur animi molestiae, officiis reiciendis sint vel at veritatis, voluptate natus id nihil laudantium expedita.</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                          <button type="button" class="btn btn-sm">View</button>
                          <button type="button" class="btn btn-sm">Add to Cart</button>
                        </div>
                        <span class="price">$89.99</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        </div>
    </div>
      
</body>
</html>

ADD CSS:

body{
    background: #252830;
}
.products {
	padding: 5% 0 0;
}
.card {
    border: none;
	box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.card-body {
	color: #fff;
	background: #2a2f40;
}
.card-title {
	font-size: 30px;
	font-weight: 700;
    transition: all .5s ease-in-out;
}
.btn-group .btn {
	background: #fe6d38;
	color: #fff;
	font-size: 18px;
	margin-right: 5px;
	padding: 10px 20px;
	font-weight: 700;
    transition: all .6s ease-in;
}
.price {
	font-size: 25px; 
	font-weight: 900;    
    transition: .6s;
}
.card:hover .price{
    animation: pulse .5s ease-in-out infinite;
}
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(.95);
    }
    0%{
        transform: scale(1);
    }
}
.card:hover .card-title{
    letter-spacing: 5px;
    font-weight: 300;
}
.btn:hover {
	background: #fff;
	color: #262626;
}
@media (max-width: 991px){
    .card {
        margin-bottom: 30px;
    }
}
@media (max-width: 767px){
    .btn-group .btn {
        font-size: 9px;
    }
}

I hope the code is working for you. You can get more snippets by clicking on the Load More button at the bottom of our homepage. If you like what you read on our website, please share it with others. Thanks for your valuable time.

Post a Comment

Please Do not Enter any spam link in the comment box