"4 boxes"
Bootstrap 3.0.0 Snippet by jeevan123456

<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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <div class="services-section" id="services"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="service_box"> <div class="service_icon"> <span class="glyphicon glyphicon-cog icon"></span> </div> <h3>Business Branding</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p> </div> </div> <div class="col-md-4"> <div class="service_box"> <div class="service_icon"> <span class="glyphicon glyphicon-cog icon"></span> </div> <h3>Analysis project</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p> </div> </div> <div class="col-md-4"> <div class="service_box"> <div class="service_icon"> <span class="glyphicon glyphicon-cog icon"></span> </div> <h3>Financial Support</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p> </div> </div> <div class="clearfix"> </div> </div> </div> </div>
body { font-family: 'Roboto';font-size: 15px; } .services-section {padding: 1em 0 5em;text-align: center;} .service_box {padding: 1em;} .service_icon { width: 100px; height: 100px; border: 2px solid #fff; margin: 15px auto 0; border-radius: 50px; } .service_box h3 {text-transform: capitalize;font-size: 1.5em; letter-spacing: 2px; color: #000; margin: 1.5em 0 1em; padding-bottom: 1em; position: relative; } .service_box h3:after { content: ''; position: absolute; width: 20%; height: 2px; background: #EA3621; left: 40%; bottom: 0; } .icon { color : red; padding:15px; font-size:70px; }

Related: See More


Questions / Comments: