JSFiddle - React, Tailwind, and code Playground
by DeathRobot
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row">
<div class="span12">
<div class="carouselwrapper">
<div class="carousel slide" id="reelCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
<li>
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<ul class="thumbnails">
...
CSS
.carouselwrapper {
width: 80%;
margin: 50px auto 0;
height: auto;
border: blue 1px solid;
}
.carousel .item > img {
width: 100%;
height: auto;
}
.thumbnails {
text-align: center;
margin-left: 0;
}
.thumbnails li {
width: 18%;
height: auto;
float: none !important
display: inline-block;
*display: inline; /* ie7 support */
margin: 0 auto;
zoom: 1;
}