<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="p-5"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="form-group mb-4"> <label for="password">Old Password</label> <div class="password-box"> <input type="password" class="form-control" id="password" placeholder="Old Password"> <span class="show-hide-password"> see </span> </div> </div> <div class="form-group mb-4"> <label for="password">Password</label> <div class="password-box"> <input type="password" class="form-control" id="password" placeholder="Password"> <span class="show-hide-password"> see </span> </div> </div> <div class="form-group"> <label for="password">confirm Password</label> <div class="password-box"> <input type="password" class="form-control" id="password" placeholder="confirm Password"> <span class="show-hide-password"> see </span> </div> </div> </div> </div> </div> </div>

body{ direction: rtl; text-align: right; } .password-box{ position: relative; } .password-box .form-control{ padding-inline-end: 80px; } .password-box .show-hide-password{ position: absolute; top: 0; left: 0; width: 60px; height: 50px; line-height: 35px; cursor: pointer; text-align: center; } [dir="ltr"] .pasword-box .show-hide-password{ left: auto; right: 0; }

$(".show-hide-password").on("click", function(){ var btn = $(this), input = $(this).parent().find(".form-control"); if(input.attr("type") === "password"){ input.prop('type', 'text'); } else if(input === "text"){ input.prop('type', 'password'); } });