<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="home-courses"> <div class="container"> <div class="row"> <div class="col-md-12 d-flex justify-content-center"> <div class="col-md-12"> <h2>Latest Courses</h2> <div class="card-group"> <div class="card"> <div class="card-body"> <div class="d-flex justify-content-center"> <img class="img-fluid text-center " src="https://via.placeholder.com/150 C/O https://placeholder.com/"></div> <h5 class="card-title pt-3 pb-3 pb-1 text-center">Card title</h5> <div class="container card-bottom"> <div class="row align-items-center"> <div class="col-8 lesson-count">2 Lessons</div> <div class="col-4 text-center lesson-view"><span>View</span> <i class="fas fa-caret-right" aria-hidden="true"></i></div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="d-flex justify-content-center"> <img class="img-fluid text-center " src="https://via.placeholder.com/150 C/O https://placeholder.com/"></div> <h5 class="card-title pt-3 pb-3 pb-1 text-center">Card title</h5> <div class="container card-bottom"> <div class="row align-items-center"> <div class="col-8 lesson-count">2 Lessons</div> <div class="col-4 text-center lesson-view"><span>View</span> <i class="fas fa-caret-right" aria-hidden="true"></i></div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="d-flex justify-content-center"> <img class="img-fluid text-center " src="https://via.placeholder.com/150 C/O https://placeholder.com/"></div> <h5 class="card-title pt-3 pb-3 pb-1 text-center">Card title</h5> <div class="container card-bottom"> <div class="row align-items-center"> <div class="col-8 lesson-count">2 Lessons</div> <div class="col-4 text-center lesson-view"><span>View</span> <i class="fas fa-caret-right" aria-hidden="true"></i></div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="d-flex justify-content-center"> <img class="img-fluid text-center " src="https://via.placeholder.com/150 C/O https://placeholder.com/"></div> <h5 class="card-title pt-3 pb-3 pb-1 text-center">Card title</h5> <div class="container card-bottom"> <div class="row align-items-center"> <div class="col-8 lesson-count">2 Lessons</div> <div class="col-4 text-center lesson-view"><span>View</span> <i class="fas fa-caret-right" aria-hidden="true"></i></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

.home-courses { padding: 64px 0 0 0; } .home-courses h2 { color: #2d1d54; font-weight: 700; padding-bottom: 20px; font-size: 28px; text-align: center; } .home-courses .card-body { padding: 0; border: 1px solid #ecedef; } .home-courses .card { border: 0px solid #ecedef; border-radius: 5px; } .home-courses .card-group > .card + .card { border: 0px solid #ecedef; border-radius: 5px; } .home-courses .card-title { font-size: 20px; font-weight: 700; border-bottom: 1px solid #ecedef; } .lesson-count { border-right: 1px solid #ecedef; font-size: 14px; font-weight: 700; color: #6c83a2; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; } .card-bottom { border-bottom: 1px solid #ecedef; } .lesson-view { color: var(--orange); padding-top: 8px; padding-bottom: 8px; padding-left: 8px; font-size: 14px; font-weight: 700; } .lesson-view span { padding-right: 3px; }