<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 ----------> <div class="container"> <br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p> <hr> <div class="row"> <div class="col-md-3"> <figure class="card card-product"> <div class="img-wrap"> <img src="https://s9.postimg.org/tupxkvfj3/image.jpg"> <a class="btn-overlay" href="#"><i class="fa fa-search-plus"></i> Quick view</a> </div> <figcaption class="info-wrap"> <h6 class="title text-dots"><a href="#">Good item name</a></h6> <div class="action-wrap"> <a href="#" class="btn btn-primary btn-sm float-right"> Order </a> <div class="price-wrap h5"> <span class="price-new">$1280</span> <del class="price-old">$1980</del> </div> <!-- price-wrap.// --> </div> <!-- action-wrap --> </figcaption> </figure> <!-- card // --> </div> <!-- col // --> <div class="col-md-3"> <figure class="card card-product"> <div class="img-wrap"> <img src="https://s9.postimg.org/4ooze1tof/image.jpg" <a class="btn-overlay" href="#"><i class="fa fa-search-plus"></i> Quick view</a> </div> <figcaption class="info-wrap"> <h6 class="title text-dots"><a href="#">The name of product</a></h6> <div class="action-wrap"> <a href="#" class="btn btn-primary btn-sm float-right"> Order </a> <div class="price-wrap h5"> <span class="price-new">$280</span> </div> <!-- price-wrap.// --> </div> <!-- action-wrap --> </figcaption> </figure> <!-- card // --> </div> <!-- col // --> <div class="col-md-3"> <figure class="card card-product"> <div class="img-wrap"><img src="https://s9.postimg.org/ojb106167/image.jpg"> <a class="btn-overlay" href="#"><i class="fa fa-search-plus"></i> Quick view</a> </div> <figcaption class="info-wrap"> <h6 class="title text-dots"><a href="#">Name of product</a></h6> <div class="action-wrap"> <a href="#" class="btn btn-primary btn-sm float-right"> Order </a> <div class="price-wrap h5"> <span class="price-new">$280</span> </div> <!-- price-wrap.// --> </div> <!-- action-wrap --> </figcaption> </figure> <!-- card // --> </div> <!-- col // --> <div class="col-md-3"> <figure class="card card-product"> <div class="img-wrap"> <img src="https://s9.postimg.org/4ooze1tof/image.jpg"> <a class="btn-overlay" href="#"><i class="fa fa-search-plus"></i> Quick view</a> </div> <figcaption class="info-wrap"> <h6 class="title text-dots"><a href="#">The name of product</a></h6> <div class="action-wrap"> <a href="#" class="btn btn-primary btn-sm float-right"> Order </a> <div class="price-wrap h5"> <span class="price-new">$280</span> </div> <!-- price-wrap.// --> </div> <!-- action-wrap --> </figcaption> </figure> <!-- card // --> </div> <!-- col // --> </div> <!-- row.// --> </div> <!--container end--> <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:after { content: ""; display: table; clear: both; visibility: hidden; } .card-product .price-new, .card-product .price { margin-right: 5px; } .card-product .price-old { color: #999; } .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 .action-wrap { padding-top: 4px; margin-top: 4px; } .card-product .bottom-wrap { padding: 15px; border-top: 1px solid #eee; } .card-product .title { margin-top: 0; }