"Bootstrap 4 Blog Carousel"
Bootstrap 4.1.1 Snippet by briankolins

Post to Facebook Tweet this

<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="//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 ----------> <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! --> <style> body { background-color: #ddffdd; } h5 { color: black; font-size:200%; } </style> <section class="pricing py-5"> <div class="container"> <div class="row"> <!-- 1 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center"> SIE Study Course</h5> <h6 class="card-price text-center">$149<span class="period"> for 12 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Starting Wednesday, August 7th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>6, 3-hour classes</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> <li><span class="fa-li"><i class="fas fa-check"></i></span>All of the material needed for success on the SIE, spread out to give time for processing and understanding.</li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 2 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 3 Tier --> <div class="col-lg-4"> <div class="card"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center">SIE Cram Course (option 2)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, August 17th and Sun, 18th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 4 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 5 Tier --> <div class="col-lg-4"> <div class="card"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center">SIE Cram Course (option 2)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, August 17th and Sun, 18th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> </div> </div> </section>
.cta-100 { margin-top: 100px; padding-left: 8%; padding-top: 7%; } .col-md-4{ padding-bottom:20px; } .white { color: #fff !important; } .mt{float: left;margin-top: -20px;padding-top: 20px;} .bg-blue-ui { background-color: #708198 !important; } figure img{width:300px;} #blogCarousel { padding-bottom: 100px; } .blog .carousel-indicators { left: 0; top: -50px; height: 50%; } /* The colour of the indicators */ .blog .carousel-indicators li { background: #708198; border-radius: 50%; width: 8px; height: 8px; } .blog .carousel-indicators .active { background: #0fc9af; } .item-carousel-blog-block { outline: medium none; padding: 15px; } .item-box-blog { border: 1px solid #dadada; text-align: center; z-index: 4; padding: 20px; } .item-box-blog-image { position: relative; } .item-box-blog-image figure img { width: 100%; height: auto; } .item-box-blog-date { position: absolute; z-index: 5; padding: 4px 20px; top: -20px; right: 8px; background-color: #41cb52; } .item-box-blog-date span { color: #fff; display: block; text-align: center; line-height: 1.2; } .item-box-blog-date span.mon { font-size: 18px; } .item-box-blog-date span.day { font-size: 16px; } .item-box-blog-body { padding: 10px; } .item-heading-blog a h5 { margin: 0; line-height: 1; text-decoration:none; transition: color 0.3s; } .item-box-blog-heading a { text-decoration: none; } .item-box-blog-data p { font-size: 13px; } .item-box-blog-data p i { font-size: 12px; } .item-box-blog-text { max-height: 100px; overflow: hidden; } .mt-10 { float: left; margin-top: -10px; padding-top: 10px; } .btn.bg-blue-ui.white.read { cursor: pointer; padding: 4px 20px; float: left; margin-top: 10px; } .btn.bg-blue-ui.white.read:hover { box-shadow: 0px 5px 15px inset #4d5f77; }

Questions / Comments: