<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2 class="text-center">Boostrap 4 product card</h2></h2> <div class="container"> <hr> <div class="row"> <div class="col-md-4"> <figure class="card card-product"> <div class="img-wrap"><img src="https://s9.postimg.org/tupxkvfj3/image.jpg"></div> <figcaption class="info-wrap"> <h4 class="title">Another name of item</h4> <p class="desc">Some small description goes here</p> <div class="rating-wrap"> <div class="label-rating">132 reviews</div> <div class="label-rating">154 orders </div> </div> <!-- rating-wrap.// --> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> <div class="col-md-4"> <figure class="card card-product"> <div class="img-wrap"><img src="https://s9.postimg.org/ojb106167/image.jpg"> </div> <figcaption class="info-wrap"> <h4 class="title">Good product</h4> <p class="desc">Some small description goes here</p> <div class="rating-wrap"> <div class="label-rating">132 reviews</div> <div class="label-rating">154 orders </div> </div> <!-- rating-wrap.// --> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> <div class="col-md-4"> <figure class="card card-product"> <div class="img-wrap"><img src="https://s9.postimg.org/4ooze1tof/image.jpg"></div> <figcaption class="info-wrap"> <h4 class="title">Product name goes here</h4> <p class="desc">Some small description goes here</p> <div class="rating-wrap"> <div class="label-rating">132 reviews</div> <div class="label-rating">154 orders </div> </div> <!-- rating-wrap.// --> </figcaption> <div class="bottom-wrap"> <a href="" class="btn btn-sm btn-primary float-right">Order Now</a> <div class="price-wrap h5"> <span class="price-new">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- bottom-wrap.// --> </figure> </div> <!-- col // --> </div> <!-- row.// --> </div> <!--container.//--> <br><br><br> <article class="bg-secondary mb-3"> <div class="card-body text-center"> <h4 class="text-white">HTML UI KIT <br> Ready to use Bootstrap 4 components and templates </h4> <p class="h5 text-white"> for Ecommerce, marketplace, booking websites and product landing pages</p> <br> <p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com <i class="fa fa-window-restore "></i></a></p> </div> <br><br><br> </article>

.card-product .img-wrap { border-radius: 3px 3px 0 0; overflow: hidden; position: relative; height: 220px; text-align: center; } .card-product .img-wrap img { max-height: 100%; max-width: 100%; object-fit: cover; } .card-product .info-wrap { overflow: hidden; padding: 15px; border-top: 1px solid #eee; } .card-product .bottom-wrap { padding: 15px; border-top: 1px solid #eee; } .label-rating { margin-right:10px; color: #333; display: inline-block; vertical-align: middle; } .card-product .price-old { color: #999; }