Bootstrap 4 Material Design Bootstrap switches

SwiBootstrap 4, Material Design Bootstrap MDB

by djibe89

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="jumbotron">
        <h1>Switches for Twitter Bootstrap 4 + Material Design</h1>
        <p class="lead">Original edit for Bootstrap 3 by mouse0270 : <a href="http://jsfiddle.net/i_heart_php/Lg209shw/" target="_blank">See original thread</a></p>
        <div class="row">
          <div class="col-2">
            <p>Default :</p>
          </div>
          <div class="col-1">
            <div class="md-form">
              <div class="material-switch">
                <input id="switch-default" name="switch-default" type="checkbox">
                <label for="switch-default" class="default-color"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-2">
            <p>Primary :</p>
          </div>
          <div class="col-1">
            <div class="md-form">
              <div class="material-switch">
                <input id="switch-primary" name="switch-primary" type="checkbox">
                <label for="switch-primary" class="primary-color"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-2">
            <p>Secondary :</p>
          </div>
          <div class="col-1">
            <div class="md-form">
              <div...

CSS

/*** 
	Material Design Switches for Bootstrap 4 and Material Design Bootstrap (MDB)
	by djibe
	JSFiddle : https://jsfiddle.net/djibe89/9deak9dh/
***/

.material-switch > input[type="checkbox"] {
  display: none;
}

.material-switch > label {
  cursor: pointer;
  height: 0px;
  position: relative;
  top: 2px;
  width: 40px;
}

.material-switch > label::before {
  background: rgb(0, 0, 0);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  content: '';
  height: 16px;
  margin-top: -8px;
  position: absolute;
  opacity: 0.3;
  transition: all 0.4s ease-in-out;
  width: 40px;
}

.material-switch > label::after {
  background: rgb(255, 255, 255);
  border-radius: 16px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  content: '';
  height: 24px;
  left: -4px;
  margin-top: -8px;
  position: absolute;
  top: -4px;
  transition: all 0.3s ease-in-out;
  width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px;
}