<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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="col-md-12"> <div class="records-info-wrap clearfix"> <div class="riw-item"> <a href="#"> <span class="riw-top">40,000</span> <span class="riw-middle">OVER</span> <span class="riw-bottom">SGF babies have been born</span> </a> </div> <div class="riw-item"> <a href="#"> <span class="riw-top">96%</span> <span class="riw-middle">MORE THEN</span> <span class="riw-bottom">Would recommend SGF</span> </a> </div> <div class="riw-item"> <a href="#"> <span class="riw-top">3 Hours</span> <span class="riw-middle">Everyday</span> <span class="riw-bottom">An SGF baby is born</span> </a> </div> <div class="riw-item"> <a href="#"> <span class="riw-top">25 Locations</span> <span class="riw-middle">Convenient Access</span> <span class="riw-bottom"> With in MD,PA,VA, and D.C.</span> </a> </div> </div> </div></div>

a:hover{text-decoration:none;} .records-info-wrap .riw-item { width: 25%; padding: 10px 20px; background-color: #3494aa; float: left; }.riw-item a, .riw-item span { color: #fff; }.riw-item span.riw-top { font-size: 31px; font-weight: 700; }.riw-item span.riw-middle { font-size: 19px; text-transform: uppercase; }.riw-item span.riw-bottom { font-size: 16px; margin-bottom: 5px; }.riw-item span { display: block; text-align: center; }.records-info-wrap .riw-item:nth-child(2) { background-color: #2e8497; }.records-info-wrap .riw-item:nth-child(3) { background-color: #297284; }.records-info-wrap .riw-item:nth-child(4) { background-color: #226474; }.riw-item:hover { background-color: #43b8d4 !important; } .riw-item { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }