<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"> <div class="col-md-6 col-lg-3"> <div class="panel panel-default panel-product"> <div class="panel-body"> <a href="#"> <img src="https://novaagro.com.br/admin/uploads/image/pinos-jpg-2.jpg" alt="" class="img-responsive center-block" /> </a> </div> <div class="panel-footer"> <h5>The company</h5> <p>Lorem ipsum</p> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="panel panel-default panel-product"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> </a> </div> <div class="panel-footer"> <h5>The company</h5> <p>Lorem ipsum</p> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="panel panel-default panel-product"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> </a> </div> <div class="panel-footer"> <h5>The company</h5> <p>Lorem ipsum</p> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="panel panel-default panel-product"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> </a> </div> <div class="panel-footer"> <h5>The company</h5> <p>Lorem ipsum</p> </div> </div> </div> <div class="col-md-6 col-lg-3"> <div class="panel panel-default panel-product"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" /> </a> </div> <div class="panel-footer"> <h5>The company</h5> <p>Lorem ipsum</p> </div> </div> </div> </div> </div>

html, body { background: #f1f1f1; } .container { margin-top: 10px; background: #f1f1f1; } .panel.panel-product { border: none; /*height: 300px;*/ /*box-shadow: 0 0 1.25rem 0 rgba(0,0,0,0.15);*/ } .panel.panel-product:hover { box-shadow: 0 0 1.25rem 0 rgba(0,0,0,0.15); } .panel-product > .panel-body { /*padding: 0px;*/ } .panel-product > .panel-body > a >img { /*width: 100%;*/ height: 300px; } .panel-product > .panel-footer { text-align: center; background: #FFF; border: none; }