# Buttons header small text goes here...

#### Buttons NEW

    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-grey">Grey</button>
    <button type="button" class="btn btn-purple">Purple</button>
    <button type="button" class="btn btn-indigo">Indigo</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-yellow">Yellow</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-pink">Pink</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-green">Green</button>
    <button type="button" class="btn btn-lime">Lime</button>
    <button type="button" class="btn btn-inverse">Inverse</button>
    <button type="button" class="btn btn-link">Link</button>

#### Button Dropdowns

Dropdown
Dropup

    <!-- dropdown -->
    <div class="btn-group">
      <a href="#" class="btn btn-default">Dropdown</a>
      <a href="#" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown"></a>
      <ul class="dropdown-menu pull-right">
        ...
      </ul>
    </div>

    <!-- dropup -->
    <div class="btn-group dropup">
      <a href="#" class="btn btn-default">Dropdown</a>
      <a href="#" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown"></a>
      <ul class="dropdown-menu pull-right">
        ...
      </ul>
    </div>

#### Button Sizes

Large Button Default Button Small Button Extra Small

    <a href="#" class="btn btn-primary btn-lg">Large Button</a>
    <a href="#" class="btn btn-primary">Default Button</a>
    <a href="#" class="btn btn-primary btn-sm">Small Button</a>
    <a href="#" class="btn btn-primary btn-xs">Extra Small</a>

#### Button State

Disabled Button Active Button
Block Button

    <a href="#" class="btn btn-default disabled">Disabled Button</a>
    <a href="#" class="btn btn-default active">Active Button</a>
    <a href="#" class="btn btn-primary btn-block">Block Button</a>

#### Button with Icon

Twitter Bootstrap Version 4.0

Comment Setting

Button block with icon

    <a href="#" class="btn btn-lg btn-primary">
      <span class="d-flex align-items-center text-left">
        <i class="fab fa-twitter fa-3x mr-3 text-black"></i>
        <span>
          <span class="d-block mb-n1"><b>Twitter Bootstrap</b></span>
          <span class="f-s-12 f-w-600 text-white-transparent-7">Version 4.0</span>
        </span>
      </span>
    </a>

#### Button Group Vertical & Justified

    <div class="btn-group">
      <button class="btn btn-white">Left</button>
      <button class="btn btn-white active">Middle</button>
      <button class="btn btn-white">Right</button>
    </div>

#### Button Toolbars

Left Middle Right

    <div class="btn-group">
      <button class="btn btn-purple">Button</button>
      <button class="btn btn-purple active">Button</button>
      <button class="btn btn-purple">Button</button>
    </div>

    <div class="btn-group btn-group-justified">
      <a class="btn btn-default">Left</a>
      <a class="btn btn-default active">Middle</a>
      <a class="btn btn-default">Right</a>
    </div>

#### Button Icon & Sizes

    <a href="#" class="btn btn-default btn-icon btn-circle btn-lg">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle btn-sm">
      <i class="fa fa-expand"></i>
    </a>
    <a href="#" class="btn btn-default btn-icon btn-circle btn-xs">
      <i class="fa fa-expand"></i>
    </a>