"Service Box - Icon Design"
Bootstrap 4.1.1 Snippet by mmm3singh

Post to Facebook Tweet this

<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="//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=Open+Sans:400,600,700|Poppins:400,500,600,700" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <body> <section class="services-area pt-100 pb-70" id="services"> <div class="container"> <div class="row"> <div class="col-xl-8 mx-auto text-center"> <div class="section-title"> <h4>what i do</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-dribbble"></i> <h4>design</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-code"></i> <h4>development</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-clone"></i> <h4>branding</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-rocket"></i> <h4>database</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-camera"></i> <h4>app</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="single-service"> <i class="fa fa-clock-o"></i> <h4>support</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi. </p> </div> </div> </div> </div> </section> </body>
.pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .services-area { background-color: #f6f6f6; } .section-title { margin-bottom: 60px; } .section-title p { color: #777; font-size: 16px; } .section-title h4 { text-transform: capitalize; font-size: 40px; position: relative; padding-bottom: 20px; margin-bottom: 20px; font-weight: 600; } .section-title h4:before { position: absolute; content: ""; width: 60px; height: 2px; background-color: #ff3636; bottom: 0; left: 50%; margin-left: -30px; } .section-title h4:after { position: absolute; background-color: #ff3636; content: ""; width: 10px; height: 10px; bottom: -4px; left: 50%; margin-left: -5px; border-radius: 50%; } .single-service { border: 1px solid #eee; padding: 30px 10px; position: relative; text-align: center; margin-bottom: 30px; } .single-service i.fa { width: 60px; height: 60px; background-color: #ff3636; font-size: 25px; color: #fff; line-height: 60px; text-align:center; margin-bottom:20px; } .single-service i.fa { -webkit-transition: .4s; transition: .4s; } .single-service:hover i.fa { border-radius: 50%; } .single-service h4 { text-transform: capitalize; font-size: 22px; margin-bottom: 10px; font-weight: 500; }

Related: See More

Vue Material Kit
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations
Navbar with Social icon & Dropdown

Questions / Comments: