<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"> <section class="sec-pding"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="sec-title"> <h2>Some <span>Heading!</span></h2> <span class="border"></span> </div> </div> </div> <div class="row how-aie"> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="#">MORE</a> </div> </div> <div class="col-md-4"> <div class="how-aie-in"> <h3>Title Goes Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt....</p> <a href="<?php echo $project_path;?>education-opportunity-at-aie.php">MORE</a> </div> </div> </div> </div> </section>

.how-aie{ display: flex; flex-wrap: wrap; } .how-aie .how-aie-in{ padding: 16px; border: 1px solid #ddd; height: 100%; } .how-aie .col-md-4{ margin-bottom: 40px; } .how-aie .col-md-4 h3{ font-size: 19px; color: #079e7e; margin-bottom: 10px; line-height: 27px; display: flex; } .how-aie .col-md-4 h3::before{ content: '\f10c'; font-family: fontAwesome; color: #202020; margin-right: 17px; font-size: 17px; } /* .how-aie .col-md-4 h3::after{ content: ""; position: relative; width: 41%; height: 1px; background: #079f86; bottom: -45px; } */ .how-aie .col-md-4 a{ float: right; background: #09455e; padding: 5px 36px; position: absolute; right: 0px; bottom: -17px; color: #fff; } .how-aie .col-md-4 a::after{ content: '\f178'; font-family: fontAwesome; margin-left: 10px; font-size: 14px; } .sec-title { display: block; overflow: hidden; position: relative; padding-bottom: 27px; } .sec-title h2 { color: #202020; font-size: 36px; font-weight: 700; line-height: 42px; text-transform: none; margin: 6px 0px; } .sec-title h2 span { color: #1fb597; } .sec-title .border { background: #1fb597; height: 3px; width: 70px; display: inline-box; display: -webkit-inline-box; margin-top: 10px; }