<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="myCarousels" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousels" data-slide-to="0" class="active"></li> <li data-target="#myCarousels" data-slide-to="1"></li> <li data-target="#myCarousels" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://images.pexels.com/photos/238211/pexels-photo-238211.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://images.pexels.com/photos/193791/pexels-photo-193791.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://images.pexels.com/photos/167676/pexels-photo-167676.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousels" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousels" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel -->

.carousel-inner img {width: 100%; max-height: 420px;} /* Carousel Header Styles */ .header-text { position: absolute; top: 35%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #e2e2e2; font-size:20px; letter-spacing:1px; } .header-text h2 {font-size: 50px; color:#fff; font-weight:600;} .header-text h2 span {padding: 10px;color:orange;} .header-text h3 span {padding: 15px;}

.carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; margin-right: 95px; } .carousel-indicators .active {background-color: #ff5900;} .carousel-control {color: #e2e2e2;} .carousel-control {width: 90;}