{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <!-- [ Main Content ] start -->
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Default</h5>
        </div>
        <div class="card-block">
          <button type="button" class="btn btn-primary" title="btn btn-primary"
            data-toggle="tooltip">Primary</button>
          <button type="button" class="btn btn-secondary" title="btn btn-secondary"
            data-toggle="tooltip">Secondary</button>
          <button type="button" class="btn btn-success" title="btn btn-success"
            data-toggle="tooltip">Success</button>
          <button type="button" class="btn btn-danger" title="btn btn-danger"
            data-toggle="tooltip">Danger</button>
          <button type="button" class="btn btn-warning" title="btn btn-warning"
            data-toggle="tooltip">Warning</button>
          <button type="button" class="btn btn-info" title="btn btn-info"
            data-toggle="tooltip">Info</button>
          <button type="button" class="btn btn-light" title="btn btn-light"
            data-toggle="tooltip">Light</button>
          <button type="button" class="btn btn-dark" title="btn btn-dark"
            data-toggle="tooltip">Dark</button>
          <button type="button" class="btn btn-link" title="btn btn-link"
            data-toggle="tooltip">Link</button>
        </div>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Outline</h5>
        </div>
        <div class="card-block">
          <button type="button" class="btn btn-outline-primary" title="btn btn-outline-primary"
            data-toggle="tooltip">Primary</button>
          <button type="button" class="btn btn-outline-secondary" title="btn btn-outline-secondary"
            data-toggle="tooltip">Secondary</button>
          <button type="button" class="btn btn-outline-success" title="btn btn-outline-success"
            data-toggle="tooltip">Success</button>
          <button type="button" class="btn btn-outline-danger" title="btn btn-outline-danger"
            data-toggle="tooltip">Danger</button>
          <button type="button" class="btn btn-outline-warning" title="btn btn-outline-warning"
            data-toggle="tooltip">Warning</button>
          <button type="button" class="btn btn-outline-info" title="btn btn-outline-info"
            data-toggle="tooltip">Info</button>
          <button type="button" class="btn btn-outline-light" title="btn btn-outline-light"
            data-toggle="tooltip">Light</button>
          <button type="button" class="btn btn-outline-dark" title="btn btn-outline-dark"
            data-toggle="tooltip">Dark</button>
        </div>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Square Button</h5>
        </div>
        <div class="card-block">
          <p>use <code>.btn-square</code> in class <code>.btn</code> class to get square button</p>
          <button type="button" class="btn btn-square btn-primary">Primary</button>
          <button type="button" class="btn btn-square btn-secondary">Secondary</button>
          <button type="button" class="btn btn-square btn-success">Success</button>
          <button type="button" class="btn btn-square btn-danger">Danger</button>
          <button type="button" class="btn btn-square btn-warning">Warning</button>
          <button type="button" class="btn btn-square btn-info">Info</button>
          <button type="button" class="btn btn-square btn-light">Light</button>
          <button type="button" class="btn btn-square btn-dark">Dark</button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h5>Basic Dropdown Button</h5>
        </div>
        <div class="card-block">
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Primary</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Secondary</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Success</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Danger</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Warning</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">Info</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h5>Split Dropdown Button</h5>
        </div>
        <div class="card-block">
          <!-- Example split danger button -->
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
          <div class="btn-group mb-2 mr-2">
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle
                Dropdown</span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <a class="dropdown-item" href="#!">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Separated link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock content %}
