"Two Step Verification Change Password Form"
Bootstrap 4.1.1 Snippet by kshiti06

<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="change-password"> <div class="card-header"> <h2>Change Your Password</h2> </div> <div class="card-body"> <div class="form-group"> <label for="pwd">Current Password</label> <input type="password" id="pwd" name="pwd" class="form-control"> </div> <div class="form-group"> <label for="pwd">New Password</label> <input type="password" id="pwd" name="pwd" class="form-control"> <span class="form-text small text-muted">The password must be 8-20 characters, and must <em>NOT</em> contain spaces. </span> </div> <div class="form-group"> <label for="pwd">Verify</label> <input type="password" id="pwd" name="pwd" class="form-control"> <span class="form-text small text-muted">To confirm, type the new password again. </span> </div> <div class="form-group"> <input type="submit" class="btn" data-toggle="modal" data-target="#myModal" Value="Click on this button to verify"> </div> </div> </div> <div class="modal" id="myModal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Please enter the following information.</h3> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <asp:Label ID="Label1" runat="server">Enter your mother's maiden name</asp:Label> <input type="text" id="mname" name="mname"> </div> <div class="modal-footer"> <button type="button" class="btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>
.change-password { padding: 28%; margin-top: -29%; } .change-password .card-header { padding: 2.8%; border: 1px solid #bdbdbd; } .change-password .card-body { background: #ffffff; border: 1px solid #bdbdbd; padding: 7%; text-align: left; font-size: 13px; margin-bottom: -78%; } .change-password .btn{ width: 100%; margin-top: 5%; font-size: 13px; }

Related: See More


Questions / Comments: