<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="//code.jquery.com/jquery-1.11.1.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"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </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-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"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </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-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"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </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-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"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </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-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>

h4{ font-weight: 600; } 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; } @media screen and (max-width: 770px) { .right{ float:left; width: 100%; } }