<ul class="cl-palette">
    <li>
        <h3>Primary</h3>
        <div style="background-color: #428BCA;" class="color"><span>#428BCA</span></div>
        <div style="background-color: #3874A9;" class="color"><span>#3874A9</span></div>
    </li>
    <li>
        <h3>Success</h3>
        <div style="background-color: #5CB85C;" class="color"><span>#5CB85C</span></div>
        <div style="background-color: #4D984D;" class="color"><span>#4D984D</span></div>
    </li>
    <li>
        <h3>Info</h3>
        <div style="background-color: #5BC0DE;" class="color"><span>#5BC0DE</span></div>
        <div style="background-color: #59A4C4;" class="color"><span>#59A4C4</span></div>
    </li>
    <li>
        <h3>Warning</h3>
        <div style="background-color: #F0AD4E;" class="color"><span>#F0AD4E</span></div>
        <div style="background-color: #BA8540;" class="color"><span>#BA8540</span></div>
    </li>
    <li>
        <h3>Danger</h3>
        <div style="background-color: #D9534F;" class="color"><span>#D9534F</span></div>
        <div style="background-color: #B04341;" class="color"><span>#B04341</span></div>
    </li>
</ul>

<p class="text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
<p class="text-info">Info text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>

<p class="bg-primary" style="padding:15px;">Primary Background</p>
<p class="bg-info" style="padding:15px;">Info Background</p>
<p class="bg-success" style="padding:15px;">Success Background</p>
<p class="bg-danger" style="padding:15px;">Danger Background</p>
<p class="bg-warning" style="padding:15px;">Warning Background</p>