Show/Hide Password using bootstrap and jquery

In this article we we will see how to show/hide password just by using bootstarp and jquery without any custom css

you will need fontawesome for eye icon you can use any other symbol in its place just change jquery a bit according to your need:

to follow along add font awesome cdn link on your page:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

and also add any jquery cdn link or downloaded version:

Add following html:

<div class="form-group">
<label>Password</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
<input id="password-field" value="" type="password" class="form-control" />
</div>
</div>

And add the following jquery :

<script>
$(".toggle-password").click(function () {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
  input.attr("type", "text");
} else {
   input.attr("type", "password");
}
});
</script>

Thats it! Your output will look something like this:

Password hidden

and on click it will change the eye icon to eye slash and reveal the text something like this:

Happy coding! :)