Bootstrap - Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin

By Hardik Savani | October 15, 2016 | Category : Javascript Bootstrap HTML jQuery

Sometimes, we may require to hide show password input field so, user can see what he written in password in register form or any other form. So, If you used Bootstrap framework then you can simply do it by using bootstrap-show-password.js plugin.

Bootstrap show Password plugin give us to good layout and with we can also custom set class when password hide or show. We can also set toggle hide show password input field.

In this full example i use bootstrap-show-password.js plugin for hide show password field. You can sole use this example simply by bellow small example.



<!DOCTYPE html>



<title>Bootstrap Hide Show Password</title>

<link rel="stylesheet" type="text/css" href="">

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>



<div class="container">


<div class="form-group">


<input type="text" name="username" class="form-control">


<div class="form-group">


<input type="password" id="password" name="password" class="form-control" data-toggle="password">


<div class="form-group">

<button class="btn btn-success">Submit</button>




<script type="text/javascript">





Ok, you can copy bellow code and run in your machine OR also you can check demo by click on eye icon.

You can get more information about bootstrap-show-password plugin from here : Click Here.

Maybe It can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: