<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"> <section id="service" class="wow fadeInUp animated" style="visibility: visible;"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-3"> <div class="service-content"> <a href="#."><span class="service-icon"><i class="fa fa-desktop img-circle wow flipInX animated" style="visibility: visible;"></i></span></a> <h3>Responsive Layout</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p> </div> </div><!--/ End first service --> <div class="col-md-3 col-sm-3"> <div class="service-content"> <a href="#."><span class="service-icon"><i class="fa fa-pagelines img-circle wow flipInX animated" style="visibility: visible;"></i></span></a> <h3>Clean Design</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p> </div> </div><!--/ End 2nd service --> <div class="col-md-3 col-sm-3"> <div class="service-content"> <a href="#."><span class="service-icon"><i class="fa fa-comments-o img-circle wow flipInX animated" style="visibility: visible;"></i></span></a> <h3>Great Support</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p> </div> </div><!--/ End 3rd service --> <div class="col-md-3 col-sm-3"> <div class="service-content last"> <a href="#."><span class="service-icon"><i class="fa fa-flask img-circle wow flipInX animated" style="visibility: visible;"></i></span></a> <h3>Best Features</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p> </div> </div><!--/ End 4th service --> </div> </div> </section> </div> </div>

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); #service{ position: relative; padding: 0 0 40px; } .service-content{ text-align: center; position: relative; padding: 0 10px; } .service-content .service-icon{ position: relative; } .service-content:after{ content: ""; background: #eb2c33; width: 8px; height: 8px; position: absolute; top: 50%; margin-top: -58px; left: 274px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, .09); -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, .09); box-shadow: 0 0 0 3px rgba(0, 0, 0, .09); z-index: 3; } .service-content:before{ content: ''; background: #ccc; position: absolute; top: 50%; margin-top: -55px; width: 100%; left: 74px; height: 1px; z-index: 0; } .service-content.last:after, .service-content.last:before{ content: ''; position: relative; box-shadow: none; border: 0; } .service-content i{ display: inline-block; overflow: hidden; color: #fff; font-size: 48px; background: #eb2c33; width:150px; height:150px; line-height: 150px; margin:30px 0 0; -webkit-box-shadow: 0 0 0 12px #f0f0f0; -moz-box-shadow: 0 0 0 12px #f0f0f0; box-shadow: 0 0 0 12px #f0f0f0; } .service-content h3{ font-size: 16px; font-weight: 700; }