<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card" style="margin:50px 0"> <!-- Default panel contents --> <div class="card-header">Checkbox to Switch</div> <ul class="list-group list-group-flush"> <li class="list-group-item"> Bootstrap Switch Default <label class="switch "> <input type="checkbox" class="default"> <span id="slider" data-before="SMS" class="slider"></span> </label> </li> <li class="list-group-item"> Bootstrap Switch Primary <label class="switch "> <input type="checkbox" class="primary"> <span class="slider"></span> </label> </li> </ul> </div> </div> </div> </div>

/* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 80px; height: 34px; float:right; } /* Hide default HTML checkbox */ .switch input {display:none;} /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: attr(data-before); height: 26px; width: 40px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; padding-left: 4px; } input.default:checked + .slider { background-color: #444; } input.primary:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(32px); -ms-transform: translateX(32px); transform: translateX(32px); }

$('#slider').on("click", function(){ $(this).attr('data-before', 'Voice'); });