"services 6 boxes"
Bootstrap 3.0.0 Snippet by palimadra

<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="service-section"> <div class="container"> <h1 class="site-title">Our Services</h1> <p>There are many variations of passages of Lorem Ipsum available,</p> <div class="text-heading-line-left"> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-ok-sign icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-list-alt icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-user icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-tags icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-map-marker icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-question-sign icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="clearfix"> </div> </div> </div> <hr> <div class="service-section text-center"> <div class="container"> <h1 class="site-title">Our Services</h1> <p>There are many variations of passages of Lorem Ipsum available,</p> <div class="text-heading-line"> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-ok-sign icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-list-alt icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-user icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-tags icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-map-marker icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="col-md-4 botmargin"> <span class="glyphicon glyphicon-question-sign icon"></span> <h4><a href="#">Popular belief</a></h4> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p> </div> <div class="clearfix"> </div> </div> </div>
body { font-family: 'Roboto';font-size: 15px; } .service-section { padding: 4em 0 3.5em; } .botmargin { margin-bottom: 1em; } .icon { color : green; padding:15px; font-size:50px; } .service-section h4 a { font-size: 1.5em; letter-spacing: 2px; color: #161616; padding-bottom: 0em; position: relative; } .service-section h4 a:hover { color: #008e10; } .site-title { font-size: 2.9em; letter-spacing: 4px; color: #161616; padding-bottom: 0.2em; position: relative; } .text-heading-line { position: relative; content: ""; height: 1px; background: #008e10; width: 44%; margin: 0 auto; top: 1px; } .text-heading-line-left { position: relative; content: ""; height: 1px; background: #008e10; width: 44%; margin: 0 auto; top: 0px; left: -316px; }

Related: See More


Questions / Comments: