<div class="example">
  <div class="sheet-header">
    <h3 id="colors">Colors</h3>
  </div>
  <div class="bs-example bs-sheet bs-example-colors" data-example-id="colors">
    <div class="row">
      <div class="text-center col-sm-4">
        <div class="color color-primary color-lightblue"></div>
        <h4>Light Blue</h4>
        <p>
          <code>#129ad6</code><br>
          <code>$bs-lightblue</code>
        </p>
      </div>
      <div class="text-center col-sm-4">
        <div class="color color-primary color-darkblue"></div>
        <h4>Dark Blue</h4>
        <p>
          <code>#1f3263</code><br>
          <code>$bs-darkblue</code>
        </p>
      </div>
      <div class="text-center col-sm-4">
        <div class="color color-primary color-darkgray"></div>
        <h4>Dark Gray</h4>
        <p>
          <code>#4d4d59</code><br>
          <code>$bs-darkgray</code>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="text-center col-sm-3">
        <div class="color color-green"></div>
        <h4>Green</h4>
        <p>
          <code>#3db559</code><br>
          <code>$bs-green</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-yellow"></div>
        <h4>Yellow</h4>
        <p>
          <code>#f7c332</code><br>
          <code>$bs-yellow</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-red"></div>
        <h4>Red</h4>
        <p>
          <code>#e74c3c</code><br>
          <code>$bs-red</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-headings"></div>
        <h4>Headings</h4>
        <p>
          <code>#292c33</code><br>
          <code>$headings-color</code>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="text-center col-sm-3">
        <div class="color color-gray-dark"></div>
        <h4>Gray Dark</h4>
        <p>
          <code>#57668b</code><br>
          <code>$gray-dark</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-gray-light"></div>
        <h4>Gray Light</h4>
        <p>
          <code>#8f98b2</code><br>
          <code>$gray-light</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-gray-lighter"></div>
        <h4>Gray Lighter</h4>
        <p>
          <code>#c7ccd8</code><br>
          <code>$gray-lighter</code>
        </p>
      </div>
      <div class="text-center col-sm-3">
        <div class="color color-gray-lightest"></div>
        <h4>Gray Lightest</h4>
        <p>
          <code>#dde0e8</code><br>
          <code>$gray-lightest</code>
        </p>
      </div>
    </div>
  </div>
</div>
