Skip to content
Related Articles
Open in App
Not now

Related Articles

How to toggle password visibility in forms using Bootstrap-icons ?

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Sep, 2021
Improve Article
Save Article

Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.

In this article, we will learn how to toggle password visibility using Bootstrap.


  • We will use few classes of Bootstrap-icons – bi, bi-eye-slash, and bi-eye.
  • Toggle these classes using JavaScript.
  • We will toggle the type of input field of password ( text to password and password to text ).


Files to be imported:

For the icons in the input field ( Eye Icon)

<link rel=”stylesheet” href=”” />

To style form elements, like button, adding padding, etc

<link rel=”stylesheet” href=”” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>

Explanation of Javascript Function:

  • We are fetching the id of the password using the getAttribute() method and determining its type. This fetching is done when an event (click) is created.
  • If it is text then convert it into the password.
  • If it is a password then convert it to text.
  • Conversion is done using setAttribute() method.


<!DOCTYPE html>
<html lang="en">
    <title>Toggle Password Visibility</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
        form i {
            margin-left: -30px;
            cursor: pointer;
    <div class="container">
        <h1>Sign In</h1>
                <input type="text" 
                    name="userID" id="userID">
                <input type="password" 
                    name="password" id="password" />
                <i class="bi bi-eye-slash" 
            <button type="submit" id="submit" 
                class="btn btn-primary">
                Log In
        const togglePassword = document
        const password = document.querySelector('#password');
        togglePassword.addEventListener('click', () => {
            // Toggle the type attribute using
            // getAttribure() method
            const type = password
                .getAttribute('type') === 'password' ?
                'text' : 'password';
            password.setAttribute('type', type);
            // Toggle the eye and bi-eye icon


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!