<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 id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://www.molepigs.com/images/demo/slider/slider_01.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.molepigs.com/images/demo/slider/slider_01.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://www.molepigs.com/images/demo/slider/slider_01.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--navigation bar starts--> <nav class="navbar navbar-expand-md navbar-expand-sm bg-light navbar-light sticky-top"> <!-- Brand --> <a class="navbar-brand" href="#"> <b>Your Company Logo</b></a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Company Item Details</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> <!--navigation bar ends--> <br> <br> <br> <section> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </section> <br> <br> <br> <section> <div class="container"> <div class="row"> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <img class="card-img-top" src="https://aeei.co.za/wp-content/uploads/2014/05/placeholder-blue1.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> </div> </section>

.carousel-caption h3 { font-size: 50px; color: #ffffff; font-family: 'Poppins', sans-serif;} .carousel-control-next, .carousel-control-prev { top: 15pc; width: 5%; background-color: #ffffff82; height: 15%;} .row-class { margin-right: -29px !important; margin-left: -29px !important;} .carousel-caption { top: 35%;} .lead { font-size: 2.4rem; text-shadow: 0px 1px 1px black; color: #ffffff;} .carousel-indicators li { width: 7px; margin-top: -70px;} .carousel-indicators .active { opacity: 1; height: 20px;}