<div class="example">
  <div class="sheet-header">
    <h3 id="smiles">Smiles</h3>
  </div>
  <div class="bs-example bs-sheet bs-example-icons" data-example-id="smiles">
    <ul class="list-unstyled">
      <li><i class="bs-icon-bookingsync"></i> bookingsync</li>
      <li><i class="bs-icon-bigboss"></i> bigboss</li>
      <li><i class="bs-icon-boss"></i> boss</li>
      <li><i class="bs-icon-laughing"></i> laughing</li>
      <li><i class="bs-icon-lemonface"></i> lemonface</li>
      <li><i class="bs-icon-sadface"></i> sadface</li>
      <li><i class="bs-icon-tongue"></i> tongue</li>
      <li><i class="bs-icon-winkface"></i> winkface</li>
      <li><i class="bs-icon-winktongue"></i> winktongue</li>
    </ul>
  </div>
</div>
~~~ html
<ul class="list-unstyled">
  <li><i class="bs-icon-bookingsync"></i> bookingsync</li>
  <li><i class="bs-icon-bigboss"></i> bigboss</li>
  <li><i class="bs-icon-boss"></i> boss</li>
  <li><i class="bs-icon-laughing"></i> laughing</li>
  <li><i class="bs-icon-lemonface"></i> lemonface</li>
  <li><i class="bs-icon-sadface"></i> sadface</li>
  <li><i class="bs-icon-tongue"></i> tongue</li>
  <li><i class="bs-icon-winkface"></i> winkface</li>
  <li><i class="bs-icon-winktongue"></i> winktongue</li>
</ul>
~~~

<div class="example">
  <div class="sheet-header">
    <h3 id="smiles-fixed-width-example">Fixed width smiles</h3>
  </div>
  <div class="bs-example bs-sheet" data-example-id="smiles-fixed-width-example">
    <ul class="list-unstyled">
      <li><i class="bs-icon-bookingsync bs-icon-fw"></i> &nbsp; bookingsync</li>
      <li><i class="bs-icon-bigboss bs-icon-fw"></i> &nbsp; bigboss</li>
      <li><i class="bs-icon-winktongue bs-icon-fw"></i> &nbsp; winktongue</li>
    </ul>
  </div>
</div>
~~~ html
<ul class="list-unstyled">
  <li><i class="bs-icon-bookingsync bs-icon-fw"></i> &nbsp; bookingsync</li>
  <li><i class="bs-icon-bigboss bs-icon-fw"></i> &nbsp; bigboss</li>
  <li><i class="bs-icon-winktongue bs-icon-fw"></i> &nbsp; winktongue</li>
</ul>
~~~
