<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="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> <!-- Single Service --> <div class="single-service"> <h4>Lorem Ipsum is simply</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div>

.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: #2588c5; 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:#2d8cc7; left: 0; top: 0; content: ""; -webkit-transition: .3s; transition: .3s } .single-service:after { position: absolute; width: 0; height: 0; background-color:#2d8cc7; 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; }