<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>
<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>
