@coreui/ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template"> <meta name="author" content="Łukasz Holeczek"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js"> <link rel="shortcut icon" href="img/favicon.png"> <title>CoreUI - Open Source Bootstrap Admin Template</title>  <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="node_modules/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet">  </head>  <body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"> <header class="app-header navbar"> <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button"> <span class="navbar-toggler-icon"></span> </button> <ul class="nav navbar-nav d-md-down-none"> <li class="nav-item px-3"> <a class="nav-link" href="#">Dashboard</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Users</a> </li> <li class="nav-item px-3"> <a class="nav-link" href="#">Settings</a> </li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-bell"></i><span class="badge badge-pill badge-danger">5</span></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-list"></i></a> </li> <li class="nav-item d-md-down-none"> <a class="nav-link" href="#"><i class="icon-location-pin"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> </a> <div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-header text-center"> <strong>Account</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-bell-o"></i> Updates<span class="badge badge-info">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-envelope-o"></i> Messages<span class="badge badge-success">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-tasks"></i> Tasks<span class="badge badge-danger">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-comments"></i> Comments<span class="badge badge-warning">42</span></a> <div class="dropdown-header text-center"> <strong>Settings</strong> </div> <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a> <a class="dropdown-item" href="#"><i class="fa fa-wrench"></i> Settings</a> <a class="dropdown-item" href="#"><i class="fa fa-usd"></i> Payments<span class="badge badge-secondary">42</span></a> <a class="dropdown-item" href="#"><i class="fa fa-file"></i> Projects<span class="badge badge-primary">42</span></a> <div class="divider"></div> <a class="dropdown-item" href="#"><i class="fa fa-shield"></i> Lock Account</a> <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a> </div> </li> </ul> <button class="navbar-toggler aside-menu-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </header> <div class="app-body"> <div class="sidebar"> <nav class="sidebar-nav"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html"><i class="icon-speedometer"></i> Dashboard <span class="badge badge-primary">NEW</span></a> </li> <li class="nav-title"> Theme </li> <li class="nav-item"> <a href="colors.html" class="nav-link"><i class="icon-drop"></i> Colors</a> </li> <li class="nav-item"> <a href="typography.html" class="nav-link"><i class="icon-pencil"></i> Typograhy</a> </li> <li class="nav-title"> Components </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="base-breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a> </li> <li class="nav-item"> <a class="nav-link" href="base-cards.html"><i class="icon-puzzle"></i> Cards</a> </li> <li class="nav-item"> <a class="nav-link" href="base-carousel.html"><i class="icon-puzzle"></i> Carousel</a> </li> <li class="nav-item"> <a class="nav-link" href="base-collapse.html"><i class="icon-puzzle"></i> Collapse</a> </li> <li class="nav-item"> <a class="nav-link" href="base-forms.html"><i class="icon-puzzle"></i> Forms</a> </li> <li class="nav-item"> <a class="nav-link" href="base-jumbotron.html"><i class="icon-puzzle"></i> Jumbotron</a> </li> <li class="nav-item"> <a class="nav-link" href="base-list-group.html"><i class="icon-puzzle"></i> List group</a> </li> <li class="nav-item"> <a class="nav-link" href="base-navs.html"><i class="icon-puzzle"></i> Navs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-pagination.html"><i class="icon-puzzle"></i> Pagination</a> </li> <li class="nav-item"> <a class="nav-link" href="base-popovers.html"><i class="icon-puzzle"></i> Popovers</a> </li> <li class="nav-item"> <a class="nav-link" href="base-progress.html"><i class="icon-puzzle"></i> Progress</a> </li> <li class="nav-item"> <a class="nav-link" href="base-switches.html"><i class="icon-puzzle"></i> Switches</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tables.html"><i class="icon-puzzle"></i> Tables</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tabs.html"><i class="icon-puzzle"></i> Tabs</a> </li> <li class="nav-item"> <a class="nav-link" href="base-tooltips.html"><i class="icon-puzzle"></i> Tooltips</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-cursor"></i> Buttons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="buttons-buttons.html"><i class="icon-cursor"></i> Buttons</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-button-group.html"><i class="icon-cursor"></i> Buttons Group</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-dropdowns.html"><i class="icon-cursor"></i> Dropdowns</a> </li> <li class="nav-item"> <a class="nav-link" href="buttons-social-buttons.html"><i class="icon-cursor"></i> Social Buttons</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="charts.html"><i class="icon-pie-chart"></i> Charts</a> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Icons</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="icons-flags.html"><i class="icon-star"></i> Flags <span class="badge badge-success">NEW</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-font-awesome.html"><i class="icon-star"></i> Font Awesome <span class="badge badge-secondary">4.7</span></a> </li> <li class="nav-item"> <a class="nav-link" href="icons-simple-line-icons.html"><i class="icon-star"></i> Simple Line Icons</a> </li> </ul> </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-bell"></i> Notifications</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="notifications-alerts.html"><i class="icon-bell"></i> Alerts</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-badge.html"><i class="icon-bell"></i> Badge</a> </li> <li class="nav-item"> <a class="nav-link" href="notifications-modals.html"><i class="icon-bell"></i> Modals</a> </li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="widgets.html"><i class="icon-calculator"></i> Widgets <span class="badge badge-primary">NEW</span></a> </li> <li class="divider"></li> <li class="nav-title"> Extras </li> <li class="nav-item nav-dropdown"> <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-star"></i> Pages</a> <ul class="nav-dropdown-items"> <li class="nav-item"> <a class="nav-link" href="pages-login.html" target="_top"><i class="icon-star"></i> Login</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-register.html" target="_top"><i class="icon-star"></i> Register</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-404.html" target="_top"><i class="icon-star"></i> Error 404</a> </li> <li class="nav-item"> <a class="nav-link" href="pages-500.html" target="_top"><i class="icon-star"></i> Error 500</a> </li> </ul> </li> <li class="nav-item mt-auto"> <a class="nav-link nav-link-success" href="http://coreui.io/" target="_top"><i class="icon-cloud-download"></i> Download CoreUI</a> </li> <li class="nav-item"> <a class="nav-link nav-link-danger" href="http://coreui.io/pro/" target="_top"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a> </li> </ul> </nav> <button class="sidebar-minimizer brand-minimizer" type="button"></button> </div>  <main class="main">  <ol class="breadcrumb"> <li class="breadcrumb-item">Home</li> <li class="breadcrumb-item"><a href="#">Admin</a></li> <li class="breadcrumb-item active">Dashboard</li>  <li class="breadcrumb-menu d-md-down-none"> <div class="btn-group" role="group" aria-label="Button group"> <a class="btn" href="#"><i class="icon-speech"></i></a> <a class="btn" href="./"><i class="icon-graph"></i>  Dashboard</a> <a class="btn" href="#"><i class="icon-settings"></i>  Settings</a> </div> </li> </ol> <div class="container-fluid"> <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-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch default </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch default - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch outline </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch outline - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch outline alternative </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch outline alternative - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text outline </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text outline - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text outline alternative </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with text outline alternative - pills </div> <div class="card-body"> <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>     <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>     <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>     <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>     <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>     <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>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with icon </div> <div class="card-body"> <label class="switch switch-icon switch-primary"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-secondary"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-success"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-warning"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-info"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-danger"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label> </div> </div> </div>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with icon - pills </div> <div class="card-body"> <label class="switch switch-icon switch-pill switch-primary"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-pill switch-secondary"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-pill switch-success"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-pill switch-warning"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-pill switch-info"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-pill switch-danger"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label> </div> </div> </div>  <div class="col-md-6"> <div class="card"> <div class="card-header"> Switch with icon outline </div> <div class="card-body"> <label class="switch switch-icon switch-primary-outline"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-secondary-outline"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-success-outline"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>     <label class="switch switch-icon switch-warning-outline"> <input type="checkbox" class="switch-input" checked=""> <span class="switch-label" data-on="" data-off=""></span> <span class="switch-handle"></span> </label>