<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main class="container pt-5">
<div class="card mb-5">
<div class="card-header">Fearures</div>
<div class="card-block p-0">
<table class="table table-bordered table-sm m-0">
<thead class="">
<tr>
<th>#</th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer p-0">
<nav aria-label="...">
<ul class="pagination justify-content-end mt-3 mr-3">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<span class="page-link">2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<table class="table table-bordered table-definition mb-5">
<thead class="table-warning ">
<tr>
<th></th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th colspan="4">
<button class="btn btn-primary float-right">Add User</button>
<button class="btn btn-default">Approve</button>
<button class="btn btn-default">Approve All</button>
</th>
</tr>
</tfoot>
</table>
<table class="table table-sm">
<thead class="table-info">
<tr>
<th></th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td class="table-danger">jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-4">
<h3>Default Styling</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Checkbox Block (Default Checked)</b></small>
<div class="form-group">
<div class="checkbox checbox-switch">
<label>
<input type="checkbox" name="" checked="checked" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Checkbox Inline (Default Unchecked)</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch">
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
<small class="text-uppercase text-muted"><b>Checkbox Disabled (Default Checked)</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
<small class="text-uppercase text-muted"><b>Checkbox Disabled (Default Unchecked)</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch">
<input type="checkbox" name="" disabled="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
<h3>Light Styling</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Checkbox Block</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-light">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Checkbox Inline</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-light">
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
<small class="text-uppercase text-muted"><b>Checkbox Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-light">
<input type="checkbox" name="" disabled="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
<h3>Success</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-success">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-success">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-success">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h3>Primary</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-primary">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-primary">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-primary">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
<h3>Info</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-info">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-info">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-info">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
<h3>Warning</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-warning">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-warning">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-warning">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h3>Danger</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-danger">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-danger">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-danger">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
<h3>Dark</h3>
<div class="panel panel-default">
<div class="panel-body">
<small class="text-uppercase text-muted"><b>Default Checked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-dark">
<label>
<input type="checkbox" name="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Unchecked</b></small>
<div class="form-group">
<div class="checkbox checbox-switch switch-dark">
<label>
<input type="checkbox" name="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
<small class="text-uppercase text-muted"><b>Default Disabled</b></small>
<div class="form-group">
<label class="checkbox-inline checbox-switch switch-dark">
<input type="checkbox" name="" disabled="" checked="" />
<span></span>
Checkbox Label
</label>
</div>
</div>
</div>
</div>
</div>
</main>
html {
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 14px;
}
.table {
border: none;
}
.table-definition thead th:first-child {
pointer-events: none;
background: white;
border: none;
}
.table td {
vertical-align: middle;
}
.page-item > * {
border: none;
}
.custom-checkbox {
min-height: 1rem;
padding-left: 0;
margin-right: 0;
cursor: pointer;
}
.custom-checkbox .custom-control-indicator {
content: "";
display: inline-block;
position: relative;
width: 30px;
height: 10px;
background-color: #818181;
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background .3s ease;
transition: background .3s ease;
vertical-align: middle;
margin: 0 16px;
box-shadow: none;
}
.custom-checkbox .custom-control-indicator:after {
content: "";
position: absolute;
display: inline-block;
width: 18px;
height: 18px;
background-color: #f1f1f1;
border-radius: 21px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -2px;
top: -4px;
-webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
transition: left .3s ease, background .3s ease, box-shadow .1s ease;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
background-color: #84c7c1;
background-image: none;
box-shadow: none !important;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
background-color: #84c7c1;
left: 15px;
}
.custom-checkbox .custom-control-input:focus ~ .custom-control-indicator {
box-shadow: none !important;
}
.checkbox.checbox-switch {
padding-left: 0;
}
.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
display: inline-block;
position: relative;
padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
display: none;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
width: 35px;
border-radius: 20px;
height: 18px;
border: 1px solid #dbdbdb;
background-color: rgb(255, 255, 255);
border-color: rgb(223, 223, 223);
box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgb(255,255,255);
content: " ";
top: 0;
position: relative;
left: 0;
transition: all 0.3s ease;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
left: 17px;
}
/* Switch Default */
.checkbox.checbox-switch label > input:checked + span,
.checkbox-inline.checbox-switch > input:checked + span {
background-color: rgb(180, 182, 183);
border-color: rgb(180, 182, 183);
box-shadow: rgb(180, 182, 183) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:checked:disabled + span,
.checkbox-inline.checbox-switch > input:checked:disabled + span {
background-color: rgb(220, 220, 220);
border-color: rgb(220, 220, 220);
box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:disabled + span,
.checkbox-inline.checbox-switch > input:disabled + span {
background-color: rgb(232,235,238);
border-color: rgb(255,255,255);
}
.checkbox.checbox-switch label > input:disabled + span:before,
.checkbox-inline.checbox-switch > input:disabled + span:before {
background-color: rgb(248,249,250);
border-color: rgb(243, 243, 243);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Switch Light */
.checkbox.checbox-switch.switch-light label > input:checked + span,
.checkbox-inline.checbox-switch.switch-light > input:checked + span {
background-color: rgb(248,249,250);
border-color: rgb(248,249,250);
box-shadow: rgb(248,249,250) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Dark */
.checkbox.checbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked + span {
background-color: rgb(52,58,64);
border-color: rgb(52,58,64);
box-shadow: rgb(52,58,64) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-dark label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked:disabled + span {
background-color: rgb(100, 102, 104);
border-color: rgb(100, 102, 104);
box-shadow: rgb(100, 102, 104) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Success */
.checkbox.checbox-switch.switch-success label > input:checked + span,
.checkbox-inline.checbox-switch.switch-success > input:checked + span {
background-color: rgb(40, 167, 69);
border-color: rgb(40, 167, 69);
box-shadow: rgb(40, 167, 69) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-success label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-success > input:checked:disabled + span {
background-color: rgb(153, 217, 168);
border-color: rgb(153, 217, 168);
box-shadow: rgb(153, 217, 168) 0px 0px 0px 8px inset;
}
/* Switch Danger */
.checkbox.checbox-switch.switch-danger label > input:checked + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked + span {
background-color: rgb(200, 35, 51);
border-color: rgb(200, 35, 51);
box-shadow: rgb(200, 35, 51) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-danger label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked:disabled + span {
background-color: rgb(216, 119, 129);
border-color: rgb(216, 119, 129);
box-shadow: rgb(216, 119, 129) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
background-color: rgb(0, 105, 217);
border-color: rgb(0, 105, 217);
box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
background-color: rgb(109, 163, 221);
border-color: rgb(109, 163, 221);
box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Info */
.checkbox.checbox-switch.switch-info label > input:checked + span,
.checkbox-inline.checbox-switch.switch-info > input:checked + span {
background-color: rgb(23, 162, 184);
border-color: rgb(23, 162, 184);
box-shadow: rgb(23, 162, 184) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-info label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-info > input:checked:disabled + span {
background-color: rgb(102, 192, 206);
border-color: rgb(102, 192, 206);
box-shadow: rgb(102, 192, 206) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
/* Switch Warning */
.checkbox.checbox-switch.switch-warning label > input:checked + span,
.checkbox-inline.checbox-switch.switch-warning > input:checked + span {
background-color: rgb(255, 193, 7);
border-color: rgb(255, 193, 7);
box-shadow: rgb(255, 193, 7) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-warning label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-warning > input:checked:disabled + span {
background-color: rgb(226, 195, 102);
border-color: rgb(226, 195, 102);
box-shadow: rgb(226, 195, 102) 0px 0px 0px 8px inset;
transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
