<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <h2>This looks good in Moodle 3.3.3 - play with the first span9 class, I have it set to span10</h2> </div> </div> <!-- Start of content block --> <div class="editor-indent" style="margin-left:80px; padding: 0 0 0 40px; margin-right: 50px"> <div class="container-fluid"> <div class="span9"> <h1>Bootstrap Thumbnail Slider</h1> <div class="well well-sm"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class=""></li> <li data-target="#myCarousel" data-slide-to="1" class="active"></li> <li data-target="#myCarousel" data-slide-to="2" class=""></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item active"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div> </div><!--/row-fluid--> </div><!--/item--> </div><!--/carousel-inner--> <h2 style="text-align: center;"><b><a class="left carousel-control-prev-icon" aria-hidden="true" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control-next-icon" aria-hidden="true" href="#myCarousel" data-slide="next">›</a></b></h2></div><!--/myCarousel--> </div><!--/well--> </div></div></div>