<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-3 col-sm-6"> <div class="services-box"> <div class="icon-box"><img src="http://html.crunchpress.com/firebrigade/images/services-icon-1.png" alt="img"></div> <div class="text-box"> <h3><a href="#">Vehicle <span>Services</span></a></h3> <p>Reliable fire equipment is vital to help you serve and protect our communities.</p> </div> </div> </div> </div> </div>

.services-box { float: left; width: 100%; border: 2px solid #c0c0c0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 30px 17px; text-align: center; position: relative; margin-bottom: 30px; } .services-box:hover {background:#ea7900; color:#fff;} .icon-box { display: inline-block; border: 1px solid #c0c0c0; width: 140px; height: 140px; border-radius: 100%; text-align: center; padding: 20px 0 0 0; margin-bottom: 10px; background: #fff; position: relative; } .text-box { float: left; width: 100%; text-align: center; position: relative; } .text-box h3 {font-size: 22px;} .text-box h3 a {color:#000;}