<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 class="container"> <div class="row"> <div class="col-md-4"> <!-- Carousel ================================================== --> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/4466e4/ffffff" alt="Slide1"></a> <div class="caption"> <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </div> <div class="item"> <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/00fc00/000000" alt="Slide2"></a> <div class="caption"> <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </div> <div class="item"> <a href="#"><img class="thumbnail" src="http://placehold.it/600x400/" alt="Slide3"></a> <div class="caption"> <h4>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> </div><!-- End Carousel --> </div> </div> </div> <script> $('#myCarousel').carousel({ interval: 4000 }); </script>

.carousel-indicators { bottom:-40px; left:0; width:100%; background:#ccc; padding: 6px 0px; margin-left:0; border-top:2px solid #fff; } .carousel-indicators li { width:12px; height:12px; background:#fff; border-color:#fff; } .carousel-indicators .active { width:14px; height:14px; background:#428bca; border-color:#428bca; } .carousel-inner .thumbnail { margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; } .carousel-inner .caption { background:#ddd; padding: 10px; }