Bootstrap Show Hide Password Example Tutorial

Bootstrap 4 , Bootstrap

Nicesnippets

7502

15-04-2021


Bootstrap Show Hide Password Example Tutorial

Now let's see example of how to hide and show password input field using bootstrap-show-password.js plugin. We will talk about show/hide password inout field 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.

Here i will give you full example for show/hide password inout field using bootstrap-show-password.js Plugin. So let's see the bellow example.

Example:


<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Hide Show Password - NiceSnippets.com</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>

</head>

<body>

<div class="container">

<form>

<div class="form-group">

<label>Username:</label>

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

</div>

<div class="form-group">

<label>Password:</label>

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

</div>

<div class="form-group">

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

</div>

</form>

</div>

<script type="text/javascript">

$("#password").password('toggle');

</script>

</body>

</html>

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.

It will help you....


Recommended Posts