<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="process_area section_padding gradient_section"> <div class="container"> <div class="row text-center"> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="single-process"> <!-- process Icon --> <div class="picon"><i class="fa fa-truck"></i></div> <!-- process Content --> <div class="process_content"> <h3>free shipping</h3> <p>Lorem ipsum dummy</p> </div> </div> </div> <!-- End Col --> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="single-process"> <!-- process Icon --> <div class="picon"><i class="fa fa-money"></i></div> <!-- process Content --> <div class="process_content"> <h3>Cash On Delivery</h3> <p>Lorem ipsum dummy</p> </div> </div> </div> <!-- End Col --> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="single-process"> <!-- process Icon --> <div class="picon"><i class="fa fa-headphones "></i></div> <!-- process Content --> <div class="process_content"> <h3>Support 24/7</h3> <p>Lorem ipsum dummy</p> </div> </div> </div> <!-- End Col --> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="single-process"> <!-- process Icon --> <div class="picon"><i class="fa fa-clock-o"></i></div> <!-- process Content --> <div class="process_content"> <h3>Opening All Week</h3> <p>Lorem ipsum dummy</p> </div> </div> </div> <!-- End Col --> </div> </div> </section>

/* -------- Process Css -------- */ .process_area{ padding-bottom: 30px; } .single-process{ padding: 25px; background: #fff; margin-bottom: 30px; box-shadow: 5px 5px 15px rgba(0,0,0,.05); border-radius: 4px; } .single-process i{ color: #fff; font-size: 23px; width: 60px; height: 60px; line-height: 60px; background: #33d286; border-radius: 50%; box-shadow: 5px 5px 15px rgba(0,0,0,0.08); } .single-process h3 { font-size: 14px; text-transform: uppercase; margin-top: 18px; margin-bottom: 0; letter-spacing: 2px; font-weight: 600; line-height: 21px; } .single-process p{ font-size: 14px; } .gradient_section{ background-image: linear-gradient(45deg, #33d286 0%, #3995c3 100%); }