
Hello Friends in this tutorial i am providing you Responsive Ecommerce Product Display, I use Bootstrap Card to create this e-commerce product display. Here you can see preview and Download Ecommerce product Display .
- E-commerce Product Display Using Bootstrap Card
- Bootstrap Card Tutorials
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="card border-0"> <div class="card-img-top"> <img class="img-fluid" src="images/destination1.jpg"> <div class="discount">23%</div> </div> <div class="card-body"> <h5>Redme Note-4</h5> <p class="card-text">Rs.25,999</p> </div> <div class="card-footer"> <a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a> <a class="card-link float-right" href="#">Details</a> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3"> <div class="card border-0"> <div class="card-img-top"> <img class="img-fluid" src="images/destination2.jpg"> <div class="discount">23%</div> </div> <div class="card-body"> <h5>Redme Note-4</h5> <p class="card-text">Rs.25,999</p> </div> <div class="card-footer"> <a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a> <a class="card-link float-right" href="#">Details</a> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3"> <div class="card border-0"> <div class="card-img-top"> <img class="img-fluid" src="images/destination4.jpg"> <div class="discount">23%</div> </div> <div class="card-body"> <h5>Redme Note-4</h5> <p class="card-text">Rs.25,999</p> </div> <div class="card-footer"> <a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a> <a class="card-link float-right" href="#">Details</a> <div class="clearfix"></div> </div> </div> </div> <div class="col-md-3"> <div class="card border-0"> <div class="card-img-top"> <img class="img-fluid" src="images/destination3.jpg"> <div class="discount">23%</div> </div> <div class="card-body"> <h5>Redme Note-4</h5> <p class="card-text">Rs.25,999</p> </div> <div class="card-footer"> <a class="card-link btn btn-warning btn-sm" href="#">Buy Now</a> <a class="card-link float-right" href="#">Details</a> <div class="clearfix"></div> </div> </div> </div> </div> </div>
.card { border-radius: 0px; -webkit-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); -moz-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); transition: all ease 0.3s; } .card:hover { -webkit-box-shadow: 0px 0px 26px 0px rgba(214,214,214,1); -moz-box-shadow: 0px 0px 26px 0px rgba(214,214,214,1); box-shadow: 0px 0px 26px 0px rgba(214,214,214,1); } h1,h2,h3,h4,h5,p { margin: 0px; padding: 0px; } .card-body { padding: 10px; } .card-body h5 { font-size: 15px; } .card-footer { margin: 0px; padding: 10px; } .btn-success { font-size: 11px; } .card-link { font-size: 13px; } .card-img-top img { position: relative; } .discount { position: absolute; width: 50px; height: 50px; line-height: 45px; color: #fff; text-align: center; border-radius: 100%; background:#1AD208; top: 10px; left: 10px; -webkit-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); -moz-box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); box-shadow: 0px 0px 5px 0px rgba(217,217,217,1); }