"Service block "
Bootstrap 3.0.0 Snippet by Eliasmia

<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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <div class="container"> <div class="row"> <div class="service-heading"> <h1 class="sh-title">What we Do?</h1> <h5 class="st-sub-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br/> Lorem Ipsum has been the industry's standard dummy</h5> </div> <div class="clearfix"></div> <div class="col-md-3 text-center"> <div class="service-block"> <div class="icon-block"> <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span> </div> <h2 class="sb-title">Graphics</h2> <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p> <a href="#" class="btn btn-default service-btn">Read more...</a> </div> </div> <div class="col-md-3 text-center"> <div class="service-block"> <div class="icon-block"> <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span> </div> <h2 class="sb-title">Graphics</h2> <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p> <a href="#" class="btn btn-default service-btn">Read more...</a> </div> </div> <div class="col-md-3 text-center"> <div class="service-block"> <div class="icon-block"> <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span> </div> <h2 class="sb-title">Graphics</h2> <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p> <a href="#" class="btn btn-default service-btn">Read more...</a> </div> </div> <div class="col-md-3 text-center"> <div class="service-block"> <div class="icon-block"> <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span> </div> <h2 class="sb-title">Graphics</h2> <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p> <a href="#" class="btn btn-default service-btn">Read more...</a> </div> </div> </div> </div>
a:hover, a:focus { color: #2a6496; text-decoration: none; } .service-heading{ margin:20px auto; } .sh-title { display: block; font-size: 32px; font-weight: 500; margin-bottom: 15px; text-align: center; } .st-sub-title { color: #969696; font-size: 16px; font-weight: 200; line-height: 20px; text-align: center; } .service-block { margin-bottom: 15px; padding: 15px; } .icon-block { border: 1px solid #fd4c3c; border-radius: 50%; display: block; height: 150px; margin: 20px auto; vertical-align: middle; width: 150px; } .icon-block-inner { background: #fd4c3c; border-radius: 50%; color: #fff; display: block; height: 100px; line-height: 100px; margin: 24px auto auto; text-align: center; vertical-align: middle; width: 100px; font-size: 32px; } .sb-title { display: block; font-size: 18px; font-weight: 500; margin-bottom: 15px; text-transform: uppercase; } .service-desc { color: #969696; font-size: 14px; font-weight: 400; line-height: 22px; } .service-btn:hover, .service-btn { background-color: #4caf50; border: 0 none; border-radius: 0; color: #fff; padding: 8px 30px; }

Related: See More


Questions / Comments:

Can this be tweaked to have 5 blocks across?

Can this be tweaked to have 2 blocks across when it goes to mobile?

stevesunshine () - 6 years ago - Reply 0