@coreui/ajax/Angular2_CLI_Full_Project/src/app/components/switches.component.html

Open Source Bootstrap Admin Template

<div class="animated fadeIn">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          3d Switch
        </div>
        <div class="card-block">
          <label class="switch switch-3d switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-3d switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-3d switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-3d switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-3d switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-3d switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch default
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch default - pills
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-pill switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch outline
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch outline - pills
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-pill switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch outline alternative
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch outline alternative - pills
        </div>
        <div class="card-block">
          <label class="switch switch-default switch-pill switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-default switch-pill switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text - pills
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-pill switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text outline
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text outline - pills
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-pill switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text outline alternative
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with text outline alternative - pills
        </div>
        <div class="card-block">
          <label class="switch switch-text switch-pill switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-text switch-pill switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="On" data-off="Off"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon - pills
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-pill switch-primary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-secondary">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-success">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-warning">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-info">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-danger">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon outline
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon outline - pills
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-pill switch-primary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-secondary-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-success-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-warning-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-info-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-danger-outline">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon outline alternative
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          Switch with icon outline alternative - pills
        </div>
        <div class="card-block">
          <label class="switch switch-icon switch-pill switch-primary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-secondary-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-success-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-warning-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-info-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
          &nbsp;&nbsp;&nbsp;
          <label class="switch switch-icon switch-pill switch-danger-outline-alt">
            <input type="checkbox" class="switch-input" checked>
            <span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
            <span class="switch-handle"></span>
          </label>
        </div>
      </div>
    </div>
    <!--/.col-->
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          Sizes
        </div>
        <div class="card-block p-0">
          <table class="table table-hover table-striped table-align-middle mb-0">
            <thead>
              <th>Size</th>
              <th>Example</th>
              <th>CSS Class</th>
            </thead>
            <tbody>
              <tr>
                <td>
                  Large
                </td>
                <td>
                  <label class="switch switch-lg switch-3d switch-primary">
                    <input type="checkbox" class="switch-input" checked>
                    <span class="switch-label"></span>
                    <span class="switch-handle"></span>
                  </label>
                </td>
                <td>
                  Add following class
                  <code>.switch-lg</code>
                </td>
              </tr>
              <tr>
                <td>
                  Normal
                </td>
                <td>
                  <label class="switch switch-3d switch-primary">
                    <input type="checkbox" class="switch-input" checked>
                    <span class="switch-label"></span>
                    <span class="switch-handle"></span>
                  </label>
                </td>
                <td>
                  -
                </td>
              </tr>
              <tr>
                <td>
                  Small
                </td>
                <td>
                  <label class="switch switch-sm switch-3d switch-primary">
                    <input type="checkbox" class="switch-input" checked>
                    <span class="switch-label"></span>
                    <span class="switch-handle"></span>
                  </label>
                </td>
                <td>
                  Add following class
                  <code>.switch-sm</code>
                </td>
              </tr>
              <tr>
                <td>
                  Extra small
                </td>
                <td>
                  <label class="switch switch-xs switch-3d switch-primary">
                    <input type="checkbox" class="switch-input" checked>
                    <span class="switch-label"></span>
                    <span class="switch-handle"></span>
                  </label>
                </td>
                <td>
                  Add following class
                  <code>.switch-sm</code>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>