//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Button</strong> Types</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  <h4>Button Sizing</h4>
  <p>
    <button type="button" class="btn btn-primary btn-lg margin-bottom-20">Large button</button>
    <button type="button" class="btn btn-default btn-lg margin-bottom-20">Large button</button>
    <button type="button" class="btn btn-primary margin-bottom-20">Default button</button>
    <button type="button" class="btn btn-default margin-bottom-20">Default button</button>
    <button type="button" class="btn btn-primary btn-sm margin-bottom-20">Small button</button>
    <button type="button" class="btn btn-default btn-sm margin-bottom-20">Small button</button>
    <button type="button" class="btn btn-primary btn-xs margin-bottom-20">Extra small button</button>
    <button type="button" class="btn btn-default btn-xs margin-bottom-20">Extra small button</button>
  </p>

  <h4>Button Colors</h4>
  <p>
    <button type="button" class="btn btn-default margin-bottom-20">Default</button>
    <button type="button" class="btn btn-primary margin-bottom-20">Primary</button>
    <button type="button" class="btn btn-success margin-bottom-20">Success</button>
    <button type="button" class="btn btn-info margin-bottom-20">Info</button>
    <button type="button" class="btn btn-warning margin-bottom-20">Warning</button>
    <button type="button" class="btn btn-danger margin-bottom-20">Danger</button>
    <button type="button" class="btn btn-red margin-bottom-20">Red</button>
    <button type="button" class="btn btn-cyan margin-bottom-20">Cyan</button>
    <button type="button" class="btn btn-green margin-bottom-20">Green</button>
    <button type="button" class="btn btn-orange margin-bottom-20">Orange</button>
    <button type="button" class="btn btn-amethyst margin-bottom-20">Amethyst</button>
    <button type="button" class="btn btn-greensea margin-bottom-20">Greensea</button>
    <button type="button" class="btn btn-dutch margin-bottom-20">Dutch</button>
    <button type="button" class="btn btn-hotpink margin-bottom-20">Hotpink</button>
    <button type="button" class="btn btn-drank margin-bottom-20">Drank</button>
    <button type="button" class="btn btn-link margin-bottom-20">Link</button>
  </p>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Button</strong> Dropdowns</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">

  <!-- Single button -->
  <div class="btn-group margin-bottom-20">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Single <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- Single button -->
  <div class="btn-group margin-bottom-20">
    <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
      Single <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  
  <!-- Split button -->
  <div class="btn-group margin-bottom-20">
    <button type="button" class="btn btn-default">Split</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  
  <!-- Split button -->
  <div class="btn-group margin-bottom-20">
    <button type="button" class="btn btn-red">Split</button>
    <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- Single button -->
  <div class="btn-group dropup margin-bottom-20">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Single Dropup <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- Single button -->
  <div class="btn-group dropup margin-bottom-20">
    <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
      Single Dropup <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  
  <!-- Split button -->
  <div class="btn-group dropup margin-bottom-20">
    <button type="button" class="btn btn-default">Split Dropup</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  
  <!-- Split button -->
  <div class="btn-group dropup margin-bottom-20">
    <button type="button" class="btn btn-red">Split Dropup</button>
    <button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <div class="notification notification-cyan">
    <h4>Dropdown Button Colors and Sizing</h4>
    <p>You can use <strong>same color and size classes</strong> as with normal buttons.</p>
  </div>
</div>
// /tile body

</section>
// /tile