<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row"> <!-- BEGIN PRODUCTS --> <div class="col-md-3 col-sm-6"> <div class="gold"><h4>Product Tittle</h4></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-3 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> <footer> </footer> </div> <div class="col-md-3 col-sm-6"> <h4>Product Tittle</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <h4>Product Tittle</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <div class="card"> <h4>Product Tittle</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <!-- END PRODUCTS --> </div> </div>

.gold {background-image:url('https://www.gayzoomrooms.com/bb/wp-content/uploads/2019/12/bx-gold.png'); background-repeat:none;padding:3px 10px;border-top-right-radius:10px;border-top-left-radius:10px;} .card { border:1px solid #999; } h4{ font-weight: 600; font-size: 18px; color: #222; } p{ font-size: 12px; margin-top: 5px; } .price{ font-size: 30px; margin: 0 auto; color: #333; } .right{ float:right; border-bottom: 2px solid #4B8E4B; } .thumbnail{ opacity:0.70; -webkit-transition: all 0.5s; transition: all 0.5s; } .thumbnail:hover{ opacity:1.00; box-shadow: 0px 0px 10px #4bc6ff; } .line{ margin-bottom: 5px; } footer{ background:url('https://www.gayzoomrooms.com/bb/wp-content/uploads/2019/12/bx-gold.png'); height: 30px width: 80%; background-size:cover; background-attachment:fixed; position:relative; overflow: hidden; border-radius:0 0 10% 10% / 100%; } @media screen and (max-width: 770px) { .right{ float:left; width: 100%; } }