Let’s see how to hide and show password input field using bootstrap-show-password.js plugin with examples. You will learn about show/hide password input field using Bootstrap Show Password JavaScript plugin.
Bootstrap show Password plugin give us 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 two examples to show/hide password input field using Bootstrap Show Password JavaScript plugin.
Example with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hide Show Password - Codeamend</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-5 mt-5">
<div class="card">
<div class="card-header text-center">
<h3>Codeamend - Bootstrap Hide Show Password</h3>
</div>
<div class="card-body">
<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">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/bootstrap-show-password@1.2.1/dist/bootstrap-show-password.min.js"></script>
<script type="text/javascript">
$("#password").password();
</script>
</body>
</html> Example with Input Toggle
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hide Show Password - Codeamend</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-5 mt-5">
<div class="card">
<div class="card-header text-center">
<h3>Codeamend - Bootstrap Hide Show Password</h3>
</div>
<div class="card-body">
<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 data-toggle="password" class="form-control" type="password" placeholder="Enter the password">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/bootstrap-show-password@1.2.1/dist/bootstrap-show-password.min.js"></script>
</body>
</html>