" Bootstrap ecommerce furniture products list"
Bootstrap 4.1.1 Snippet by Umerfarooq

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 mt-5"> <div class="row d-flex justify-content-center g-1"> <div class="col-md-4"> <div class="product text-center"> <img src="https://i.imgur.com/dzyiJS2.jpg" width="250"> <div class="about text-left px-3"> <h4>Standron Chair</h4> <span class="text-muted">Home decor</span> <h3>$230</h3> </div> <span class="dot"><span class="inner-dot"><i class="fa fa-plus"></i></span></span> </div> </div> <div class="col-md-4"> <div class="product text-center"> <img src="https://i.imgur.com/7BwBYPB.jpg" width="250"> <div class="about text-left px-3"> <h4>Trodon ChairTrodon Chair</h4> <span class="text-muted">Home decor</span> <h3>$220</h3> </div> <span class="dot"><span class="inner-dot"><i class="fa fa-plus"></i></span></span> </div> </div> <div class="col-md-4"> <div class="product text-center"> <img src="https://i.imgur.com/HjkIPFZ.jpg" width="250"> <div class="about text-left px-3"> <h4>Dura Chair</h4> <span class="text-muted">Home decor</span> <h3>$299</h3> </div> <span class="dot"><span class="inner-dot"><i class="fa fa-plus"></i></span></span> </div> </div> </div> </div>
body { background-color: #eee } .product { padding: 10px; background-color: #fff; position: relative } .about h4 { margin-bottom: -3px } .about h3 { color: #e3ce57 } .about span { font-size: 13px } .dot { height: 40px; width: 40px; background-color: #e3ce57; border-radius: 50%; display: inline-block; display: flex; justify-content: center; align-items: center; position: absolute; cursor: pointer; right: 10%; z-index: 10; bottom: -5% } .inner-dot { height: 30px; width: 30px; background-color: #fff; border-radius: 50%; display: inline-block; display: flex; justify-content: center; align-items: center; position: absolute; cursor: pointer }

Related: See More


Questions / Comments: