"Icon section With Content"
Bootstrap 4.1.1 Snippet by Shivamsemisetia

<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 ----------> <section class="we_help_you" id="we_help"> <div class="container"> <div class="row aos-init aos-animate" data-aos="fade-up" data-aos-duration="3000"> <div class="col-lg-9 mx-auto"> <h3>How Can We Help You?</h3> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, or randomised words which don't look even slightly believable.</p> </div> </div> <div class="row aos-init aos-animate" data-aos="fade-up" data-aos-duration="3000"> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who"> <img src="images/seo.png" alt=""> </div> <div class="icon-box-info"> <h5>SEO</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who bg-green"> <img src="images/localseo.png" alt=""> </div> <div class="icon-box-info"> <h5>Local SEO</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who bg-blue"> <img src="images/google.png" alt=""> </div> <div class="icon-box-info"> <h5>Google Adwords</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who bg-yellow"> <img src="images/localgoo.png" alt=""> </div> <div class="icon-box-info"> <h5>Google Local Service Ads</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who bg-bluee"> <img src="images/facebook.png" alt=""> </div> <div class="icon-box-info"> <h5>Facebook Advertising</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="icon-box"> <div class="d-flex"> <div class="icon-who bg-pink"> <img src="images/web.png" alt=""> </div> <div class="icon-box-info"> <h5>Web Development</h5> <p>There are many variations of passages of Lorem Ipsum, but the majority have suffered in some form, or randomised words which don't look even.</p> </div> </div> </div> </div> </div> </div> </section>
.we_help_you { padding-top: 150px; padding-bottom: 50px; } .seo_service { padding-bottom: 140px; } .we_help_you h3, .why_choose h3, .get_free_info h3, .better-img-info h3, .testimonials h3, .full_service h3, .We_are_next h3{ text-align: center; font-size: 35px; color: #0c0f13; font-weight: 700; padding-bottom: 15px; } .we_help_you p{ font-size: 16px; line-height: 28px; color: #556274; font-weight: 400; font-family: "Poppins"; text-align: center; } .icon-box-info { width: 84%; margin-left: 20px; } .icon-box-info p { text-align: left; } .we_help_you .icon-box { padding: 30px 25px; margin-top: 40px; border-radius: 5px; background-color: #fcfcfd; border: 2px solid #e8ecf1; } .we_help_you .icon-who { padding: 15px; border-radius: 5px; width: 62px; height: 60px; background-color: #0d4bd6; align-items: center; line-height: 30px; text-align: center; } .icon-box-info h5 { font-size: 18px; color: #0c0f13; font-weight: 700; margin-bottom: 5px; } .icon-box-info P { font-size: 16px; } .bg-green { background-color: #0dd6a9 !important; } .bg-blue { background-color: #7f48fb !important; } .bg-yellow { background-color: #ffbb38 !important; } .bg-bluee { background-color: #206fe7 !important; } .bg-pink { background-color: #ff3875 !important; }

Related: See More


Questions / Comments: