<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> </ul> </div><!-- /Slide1 --> <div class="item"> <ul class="thumbnails"> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> <li class="col-sm-3"> <div class="fff"> <div class="thumbnail"> <img src="http://placehold.it/360x240" alt=""> </div> <div class="caption"> <h4>Praesent commodo</h4> <p>Nullam Condimentum Nibh Etiam Sem</p> <p>test</p> </div> </div> </li> </ul> </div><!-- /Slide1 --> </div> <nav> <ul class="control-box pager"> <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li> <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li> </ul> </nav> <!-- /.control-box --> </div><!-- /.col-xs-12 --> </div><!-- /.container -->

/* Global */ img { max-width:100%; } .thumbnails li> .fff .caption { background:#fff !important; } /* Carousel Control */ .control-box { text-align: right; width: 100%; } .carousel-control{ background: #666; border: 0px; border-radius: 0px; display: inline-block; font-size: 34px; font-weight: 200; opacity: 0.5; position: static; height: 100%; width: 100%; } /* Mobile Only */ @media (max-width: 767px) { .page-header, .control-box { text-align: center; } } @media (max-width: 479px) { .caption { word-break: break-all; } } li { list-style-type:none;} ::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; } ::-moz-selection { background: #ff5e99; color: #FFFFFF; }