<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" align="center"> <img class="d-block" src="http://www.beckeradvogados.com.br/homologacao/img/slider-1.png" alt="First slide"> <div class="carousel-caption d-none d-md-block"> <h5>ÁREAS DE ATUAÇÃO</h5> <h6>Nulla vitae elit libero, a pharetra augue mollis interdum.</h6> <p><a href="#">SAIBA MAIS</a></p> </div> </div> <div class="carousel-item" align="center"> <img class="d-block" src="http://www.beckeradvogados.com.br/homologacao/img/slider-2.png" alt="Second slide"> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <h6>Nulla vitae elit libero, a pharetra augue mollis interdum.</h6> <p><a href="#">SAIBA MAIS</a></p> </div> </div> <div class="carousel-item" align="center"> <img class="d-block" src="http://www.beckeradvogados.com.br/homologacao/img/slider-3.png" alt="Third slide"> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <h6>Nulla vitae elit libero, a pharetra augue mollis interdum.</h6> <p><a href="#">SAIBA MAIS</a></p> </div> </div> </div> </div>

.carousel-caption{ background-color:#f9f8f8; top: 10%; bottom: inherit; left: 45%; text-align: left; } .carousel-caption h5{ color:#454545; font-size: 16px; text-transform: uppercase; margin:5%; } .carousel-caption h6{ color:#454545; font-size: 35px; margin:5%; } .carousel-caption h6:after{ content: ""; width: 100%; height: 5px; background-color: #3e8050; left: 0; position: relative; display: block; top: 25px; } .carousel-caption p a{ color:#3e8050; font-size: 12px; margin:5%; font-weight:bold; } #carouselExampleIndicators{ background-color: #cccccc; } .carousel-indicators .active{ background-color: #3e8050; }