"Bootstrap 4 Services Box"
Bootstrap 4.1.1 Snippet by ozki

<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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,800,900%7cRaleway:300,400,500,600,700" rel="stylesheet"> <body> <section class="services pt-100 pb-50" id="services"> <div class="container"> <div class="row"> <div class="col-xl-6 mx-auto text-center"> <div class="section-title mb-100"> <p>what i can do</p> <h4>my services</h4> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-laptop"></i> <h4>Web Design </h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-gears"></i> <h4>Web Development</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-mobile"></i> <h4>Responsive Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-magic"></i> <h4>Graphic Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-pencil"></i> <h4>Creative Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> <div class="col-lg-4 col-md-6"> <!-- Single Service --> <div class="single-service"> <i class="fa fa-fa fa-lightbulb-o"></i> <h4>Branding</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry typesetting industry </p> </div> </div> </div> </div> </section> </body>
.section-title { position: relative } .section-title p { font-size: 16px; margin-bottom: 5px; font-weight: 400; } .section-title h4 { font-size: 40px; font-weight: 600; text-transform: capitalize; position: relative; padding-bottom: 20px; display: inline-block } .section-title h4:before { position: absolute; content: ""; width: 80px; height: 2px; background-color: #d8d8d8; bottom: 0; left: 50%; margin-left: -40px; } .section-title h4:after { position: absolute; content: ""; width: 50px; height: 2px; background-color: #FF7200; left: 0; bottom: 0; left: 50%; margin-left: -25px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .mb-100{ margin-bottom:100px; } .services { background-color: #FBFBFB; } .single-service { position: relative; text-align: center; margin-bottom: 50px; -webkit-transition: .3s; transition: .3s; padding: 30px 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16) } .single-service:before { position: absolute; width: 0; height: 0; background-color: #FF7200; left: 0; top: 0; content: ""; -webkit-transition: .3s; transition: .3s } .single-service:after { position: absolute; width: 0; height: 0; background-color: #FF7200; right: 0; bottom: 0; content: ""; -webkit-transition: .3s; transition: .3s } .single-service:hover:after, .single-service:hover:before { width: 50%; height: 2px; -webkit-transition: .3s; transition: .3s } .single-service:hover { box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.10) } .single-service i.fa { font-size: 20px; width: 60px; height: 60px; border: 1px solid #ddd; line-height: 60px; margin-bottom: 30px; border-radius: 50%; -webkit-transition: .3s; transition: .3s } .single-service:hover i.fa { background-color: #FF7200; color: #fff; border-color: #FF7200; border-radius: 0; } .single-service h4 { font-size: 20px; font-weight: 400; margin-bottom: 15px; text-transform: capitalize; } .single-service p { font-size: 15px; line-height: 1.8; }

Related: See More


Questions / Comments: