<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 ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="bg-super"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="circ"> <h3>11+</h3> <i class="fa fa-home" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Organization</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>230+</h3> <i class="fa fa-handshake-o" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Participation</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>4+</h3> <i class="fa fa-group" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Symposia</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>119+</h3> <i class="fa fa-laptop" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Presentations</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>300+</h3> <i class="fa fa-gift" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Abstract Recieved</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>16+</h3> <i class="fa fa-globe" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>countries</h5> </div> </div> <div class="col-md-3 "> <div class="circ"> <h3>12+</h3> <i class="fa fa-comment" aria-hidden="true" style="font-size:100px;z-index:1;"></i> <h5>Technical Sessions</h5> </div> </div> </div> </div> </div>

h3 { position:relative; z-index:2; text-align:center; color: #eee; font-weight:normal; font-size:5rem; padding-top:40px; } .fa{ font-size: 100px; z-index: 1; margin-top: -100px; display:block; color:#00eeff22; margin-left: 20%; text-align:center; } h5{ color:white; text-align:center; padding:0 20% 10% 20%; font-weight:bolder; } .bg-super{ background: url("http://www.twitrcovers.com/wp-content/uploads/2014/06/landscapes-mountains-sunset-l.jpg")no-repeat center center; background-size: cover; } .circ{ background-color:#0099bb99; border-radius: 180px; margin: 0 15% 0 15%; }