<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="product-area"> <div class="container"> <div class="row text-center"> <div class="col-md-3"> <div class="product-box"> <div class="product-img"> <img class="img-responsive" src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.xKzO5ju99FPL1D2tsChRFAHaHa%26pid%3D15.1&f=1"> </div> <div class="product-name"> <a href=""><h4>Finexpert Financial Advisor</h4></a> <a href=""><h6>HTML</h6></a> </div> <div class="product-lists"> <ul class="list-inline"> <li><a href="#">Free</a></li> <li><a href="#">Request Download</a></li> </ul> </div> </div> </div> </div> </div> </div>

.product-box {border:1px solid #e2e2e2; padding:10px; min-height:200px; } .product-box:hover {box-shadow: 1px 4px 4px rgba(0, 0, 0, .5);transition: all .2s;} .product-img img {width:100%;border-radius: 8px;opacity: 0.7;} .product-img img:hover {opacity: 1.0;} .product-name a {color:#000} .product-name a:hover {} .product-lists ul li a {font-size:16px;color:#dd000;}

<div class="product-button"> <button type="button" class="btn btn-primary site-btn">Primary</button> <button type="button" class="btn btn-primary site-btn">Primary</button> </div>