"service section design with icons bootstrap 4"
Bootstrap 4.1.1 Snippet by bootstraplily.com

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="bg-wrapper-grey mb-5"> <div class="container pt-5 pb-4"> <div class="row"> <div class="col-12 text-center"> <p class="m-0 small dd2">Area of Practice</p> <h3>How Can We Help You</h3> <div class="divider mx-auto"></div> </div> </div> <div class="row"> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/family-care.png"> </div> </div> <div class="col-9"> <h4><a href="#">Family Law</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/disabled.png"> </div> </div> <div class="col-9"> <h4><a href="#">Personal Injury</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/worker.png"> </div> </div> <div class="col-9"> <h4><a href="#">Business Law</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/handcuffs.png"> </div> </div> <div class="col-9"> <h4><a href="#">Criminal Law</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/patient.png"> </div> </div> <div class="col-9"> <h4><a href="#">Education Injury</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> <div class="col-12 col-sm-12 col-md-6 col-lg-4"> <div class="feature-item"> <div class="row"> <div class="col-3"> <div class="icon-circle d-flex align-items-center justify-content-center"> <img src="https://bootstraplily.com/demo/service-section/service-section-one/house-with-scales.png"> </div> </div> <div class="col-9"> <h4><a href="#">Real Estate Law</a></h4> <div class="divider2"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.</p> </div> </div> </div> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>
.bg-wrapper-grey { background-color: #eaeaea; } .dd2 { color: #b9753f; } .divider { width: 45px; height: 1px; background-color: #b9753f; margin-top: 20px; margin-bottom: 40px; } .feature-item { margin-bottom: 40px; } .icon-circle { width: 70px; height: 70px; border-radius: 70px; background-color: #FFF; border: 1px solid #f1d5bf; } .divider2 { width: 35px; height: 1px; background-color: #b9753f; margin-top: 10px; margin-bottom: 20px; } .feature-item p { font-size: 14px; line-height: 24px; } a { color: #020410; transition: all 0.3s ease; text-decoration: none; } a:hover { text-decoration: none; color: #b9753f; }

Related: See More


Questions / Comments: