<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"> <div class = "col-md-4"> <div class="card-base"> <div class="card-icon"><a href="#" title="Widgets" id="widgetCardIcon" class="imagecard"><span class="glyphicon glyphicon-user"></span></a> <div class="card-data widgetCardData"> <h2 class="box-title" style="color: #bb7824;">Widgets</h2> <p class="card-block text-center">Rich, Adaptive, Mobile-First Widgets. Driven by deep User Centered Analysis and Research.</p> <a href="#" title="Style Builder" class="anchor btn btn-default" style="background: #bb7824; border: #bb7824;"> <i class="fa fa-paper-plane" aria-hidden="true"></i>  Explore More </a></div> </div> <div class="space"></div> </div> </div> </div> </div>

.card-base > .card-icon { text-align: center; position: relative; } .imagecard { z-index: 2; display: block; positioN: relative; width: 88px; height: 88px; border-radius: 50%; border: 5px solid white; box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); margin: 0 auto; color: white; } .card-base > .card-icon > .card-data { min-height: 250px !important; margin-top: -24px; background: ghostwhite; border: 1px solid #e0e0e0; padding: 15px 0 10px 0; box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); min-height: 215px; } #widgetCardIcon { background: #bb7824 !important; font-size: 28px; line-height: 78px; }