<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2>Wired style</h2>
      <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch1
      </div>
      <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch2
      </div>
      <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch3
      </div>
    </div></col-->
    <div class="col-sm-6">
      <h2>Flat style</h2>
      <div>
        <label class="switch flat">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch1
      </div>
      <div>
        <label class="switch flat">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch2
      </div>
      <div>
        <label class="switch flat">
            <input type="checkbox">
            <span class="slider"></span>
        </label> Switch3
      </div>
    </div></col-->
  </div></row-->
</div></container-->
/* Basic Rules */
.switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:60px;
    height:30px;
    margin:8px;
    transform:translateY(50%);
    position:relative;
}
/* Style Wired */
.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
     transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
}

input:checked + .slider:before {
    transform:translateX(30px);
    background:limeGreen;
}
input:checked + .slider {
    box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen;
}

/* Style Flat */
.switch.flat .slider {
 box-shadow:none;
}
.switch.flat .slider:before {
  background:#FFF;
}
.switch.flat input:checked + .slider:before {
 background:white;
}
.switch.flat input:checked + .slider {
  background:limeGreen;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css