<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> </tr> <tr> <td> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </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> </tr> </tbody> </table> </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; }