<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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="https://basic-tutorials.de/wp-content/uploads/2020/07/high-resolution-png-logitechgprowirelessheadset3qtrenviro-e1595931923541.png" alt="productImg"> <div class="card-img-overlay d-flex justify-content-end"> <a href="#" class="card-link text-danger like"> <i class="fa fa-heart"></i> </a> </div> <div class="card-img-overlay d-flex justify-content-baseline"> <h6 class="card-title text-light">Wireless Headphones</h6> </div> <div class="price text-danger"> <h5>$ 20</h5> </div> <div class="cart text-danger"> <button class="btn btn-danger"><i class="fa fa-shopping-cart" aria-hidden="true"></i></button> </div> </div>

.price{ position: absolute; bottom: 2%; left: 5%; } .cart{ position: absolute; bottom: 2%; right: 5%; }