<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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-3"> </div> <div class="col-md-6 text-center"> <div class="login-container"> <div class="login-form"> <div id="formContent"> <form> <div class="logo"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQTFeMWtnpisVFHeAV2OF4U3QGgUZ8ji8pN368yLk-DI0_5KhUw" id="icon" alt="User Icon" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Login" name="login" value="" /> </div> <div class="form-group password"> <input type="password" id="password-input" class="form-control" placeholder="Password" name="password" value="" /> <a href="#" class="password-control" onclick="return show_hide_password(this);"></a> </div> <div class="form-group"> <input type="submit" class="btnSubmit" value="Login" /> </div> </form> </div> </div> </div> </div> <div class="col-md-3"> </div> </div> </div>

.login-container{ margin-top: 10%; margin-bottom: 10%; margin-left: 10%; } .login-form{ padding: 5%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19); } .login-form h3{ text-align: center; color: #333; } .login-container form{ padding: 10%; } .btnSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; border: none; cursor: pointer; } .login-form .btnSubmit{ font-weight: 600; color: #fff; background-color: #0062cc; } #icon{ width:328px ; height:100px ; } .password { margin: 15px auto; position: relative; } .password-control { position: absolute; top: 11px; right: 6px; display: inline-block; width: 20px; height: 20px; background: url(https://snipp.ru/demo/495/view.svg) 0 0 no-repeat; } .password-control.view { background: url(https://snipp.ru/demo/495/no-view.svg) 0 0 no-repeat; }

function show_hide_password(target){ var input = document.getElementById('password-input'); if (input.getAttribute('type') === 'password') { target.classList.add('view'); input.setAttribute('type', 'text'); } else { target.classList.remove('view'); input.setAttribute('type', 'password'); } return false; }