<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <h2 class="text-center">Zapper^TM</h2> <!-- Text input--> <div class="form-group"> <label class="col-md-12 control-label" style="text-align:left;font-weight: 300;" for="emailid">E-mail</label> <div class="col-md-12"> <input id="emailid" name="emailid" placeholder="" class="form-control input-md" required="" type="text"> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-12 control-label" style="text-align:left;font-weight: 300;" for="password">Password</label> <div class="col-md-12"> <input id="password" name="password" placeholder="" class="form-control input-md" required="" type="password"> <span class="help-block"> </span> </div> </div> <div class="material-switch"> <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox" checked/> <label for="someSwitchOptionDefault" class="label-default"></label>   Keep me Logged in </div> <!-- Button --> <br> <div class="form-group"> <label class="col-md-12 control-label" for="login"></label> <div class="col-md-8 col-md-offset-2"> <button id="login" name="login" class="btn btn-primary btn-block">Login</button> </div> </div> </fieldset> </form> </div> </div> <div class="row"> <div class="col-md-12"> </div> </div> </div>

* { color: #777; font-weight: 300; } .material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; 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; } .btn-primary { color: #fff; background-color: #777; border-color: #777; }