<div class="carousel">
<div class="carousel-body">
<ul>
<li>
<div class="red bordered">
<h1>red</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="blue bordered">
<h1>blue</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="orange bordered">
<h1>orange</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="green bordered">
<h1>green</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="yellow bordered">
<h1>yellow</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="charcoal bordered">
<h1>charcoal</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="black bordered">
<h1>black</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="grey bordered">
<h1>grey</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="white bordered">
<h1>white</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="info bordered">
<h1>info</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="success bordered">
<h1>success</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="alert bordered">
<h1>alert</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="warning bordered">
<h1>warning</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>
<li>
<div class="error bordered">
<h1>error</h1>
<i class="fa-smile-o fa-9x"></i>
</div>
</li>

</ul>
</div>
</div>