<div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </div>
            <div class="mb-3">
                <label for="inputPassword5" class="form-label">Password</label>
                <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
                <div id="passwordHelpBlock" class="form-text">
                    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                </div>
            </div>
            <div class="mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="formFile" class="form-label">Default file input example</label>
                <input class="form-control" type="file" id="formFile">
            </div>
            <div class="mb-3">
                <label for="exampleColorInput" class="form-label">Color picker</label>
                <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
            </div>
            <div class="mb-3">
                <label for="exampleDataList" class="form-label">Datalist example</label>
                <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                <datalist id="datalistOptions">
                    <option value="San Francisco">
                    <option value="New York">
                    <option value="Seattle">
                    <option value="Los Angeles">
                    <option value="Chicago">
                </datalist>
            </div>
                                

            <input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
            <input class="form-control mb-3" type="text" placeholder="Default input" aria-label="default input example">
            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
                                

            <input class="form-control mb-3" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
            <input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
                                

            <div class="position-relative">
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="checkstrength" placeholder="Enter your password">
                    <label for="checkstrength">Password</label>
                </div>
                <button class="btn btn-square btn-link text-theme-1 position-absolute end-0 top-0 mt-2 me-2 ">
                    <i class="bi bi-eye"></i>
                </button>
            </div>
            <div class="feedback mb-3">
                <div class="row">
                    <div class="col">
                        <div class="check-strength" id="checksterngthdisplay">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <span class="small" id="textpassword"></span>
                        <i class="bi bi-info-circle text-theme-1 ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Password should contain atleast 1 capital, 1 alphanumeric & min. 8 characters"></i>
                    </div>
                </div>
            </div>
            
            <script>
            	/* this function already available in the function js */
            	checkstrength();
             </script>