<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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-fluid"> <div class="row"> <div class="col-md-2 col-sm-3 "> <div class="wrimagecard wrimagecard-topimage"> <a href="#"> <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)"> <center><img src="http://www.serpro.gov.br/++resource++serpro.portalserprotema/img/logo-serpro.png" class="img-responsive"></img> </center> </div> <div class="wrimagecard-topimage_title"> <h4>Serpro <div class="pull-right badge" id="WrControls"></div></h4> </div> </a> </div> </div> <div class="col-md-2 col-sm-3"> <div class="wrimagecard wrimagecard-topimage"> <a href="#"> <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)"> <center><img src="http://www.correios.com.br/++theme++correios.site.tema/images/logo_correios.png" class="img-responsive"></img> </center> </div> <div class="wrimagecard-topimage_title"> <h4>Correios <div class="pull-right badge" id="WrControls"></div></h4> </div> </a> </div> </div> <div class="col-md-2 col-sm-3"> <div class="wrimagecard wrimagecard-topimage"> <a href="#"> <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)"> <center><img src="http://static5.vvale.com.br/wp-content/uploads/2013/03/serasa.jpg" class="img-responsive"></img> </center> </div> <div class="wrimagecard-topimage_title"> <h4>Serasa <div class="pull-right badge" id="WrControls"></div></h4> </div> </a> </div> </div> <div class="col-md-2 col-sm-3"> <div class="wrimagecard wrimagecard-topimage"> <a href="#"> <div class="wrimagecard-topimage_header" style="background-color: rgba(119, 178, 88, 0.1)"> <center><img src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAAiXAAAAJDZiM2JlMDEyLTQyMzItNDMyMy1iZDBmLWM1OGNiMDIwZDBmMQ.png" class="img-responsive"></img> </center> </div> <div class="wrimagecard-topimage_title"> <h4>Field Control <div class="pull-right badge" id="WrControls"></div></h4> </div> </a> </div> </div> </div> </div>

.wrimagecard{ margin-top: 0; margin-bottom: 1.5rem; text-align: left; position: relative; background: #fff; box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15); border-radius: 4px; transition: all 0.3s ease; } .wrimagecard .fa{ position: relative; font-size: 70px; } .wrimagecard-topimage_header{ padding: 20px; } .wrimagecard-topimage_header img { width: 10rem; height: 5rem; } a.wrimagecard:hover, .wrimagecard-topimage:hover { box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2); } .wrimagecard-topimage a { width: 100%; height: 100%; display: block; } .wrimagecard-topimage_title { padding: 20px 24px; height: 80px; padding-bottom: 0.75rem; position: relative; } .wrimagecard-topimage a { border-bottom: none; text-decoration: none; color: #525c65; transition: color 0.3s ease; }