<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 ----------> <div class="container pt-5"> <table class="table table-bordered availability-table"> <thead class="table-inverse"> <tr> <th></th> <th>Day</th> <th>Evening</th> <th>Night</th> </tr> </thead> <tbody> <tr> <td> Sunday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Monday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Tuesday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Wednesday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Thursday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Friday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> <tr> <td> Saturday </td> <td> <label class="custom-control availability-checkbox checkbox-day"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-evening"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> <td> <label class="custom-control availability-checkbox checkbox-night"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </td> </tr> </tbody> </table> </div>

html { font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; } /* * This is the table that shows default availability for doctors */ .availability-table { width: 1px; margin-left:auto; margin-right:auto; border: none; } .availability-table thead th:first-child { pointer-events: none; background: white; border: none; } .availability-table td { vertical-align: middle; } .availability-table th { text-align: center; } /* * Custom checkbox CSS, below are three color classes, day, evening, and night */ .availability-checkbox { min-height: 1rem; padding-left: 0; margin-right: 0; cursor: pointer; } .availability-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; } .availability-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; -moz-transition: left .3s ease, background .3s ease, box-shadow .1s ease; -o-transition: left .3s ease, background .3s ease, box-shadow .1s ease; transition: left .3s ease, background .3s ease, box-shadow .1s ease; } .availability-checkbox .custom-control-input:focus ~ .custom-control-indicator { box-shadow: none !important; } /* * Day color codes */ .checkbox-day .custom-control-input:checked ~ .custom-control-indicator { background-color: #5cb85c; background-image: none; box-shadow: none !important; } .checkbox-day .custom-control-input:checked ~ .custom-control-indicator:after { background-color: #5cb85c; left: 15px; } /* * Evening color codes */ .checkbox-evening .custom-control-input:checked ~ .custom-control-indicator { background-color: #f0ad4e; background-image: none; box-shadow: none !important; } .checkbox-evening .custom-control-input:checked ~ .custom-control-indicator:after { background-color: #f0ad4e; left: 15px; } /* * Night color codes */ .checkbox-night .custom-control-input:checked ~ .custom-control-indicator { background-color: #428bca; background-image: none; box-shadow: none !important; } .checkbox-night .custom-control-input:checked ~ .custom-control-indicator:after { background-color: #428bca; left: 15px; }