This Bootstrap 5 code snippet helps you to create a password input field with a strength meter. It visually indicates password strength. It assesses the password’s complexity and uses color-coded meter sections to show strength levels, helping you create more secure passwords effortlessly.
You can implement this code in the password input field of your registration or sign-up forms to encourage users to create strong passwords when creating accounts.
How to Create Bootstrap 5 Password Strength Meter
1. First, make sure to include the Bootstrap 5 CSS and JavaScript libraries by adding the necessary CDN links to your HTML header.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'> <script src='https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js'></script>
2. Now, add the HTML structure to your web page. The following code demonstrates how to set up a simple password input field with the strength meter:
<body class="container-fluid bg-body-tertiary d-block">
<div class="row justify-content-center">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4" style="min-width: 500px;">
<div class="card bg-white mb-5 mt-5 border-0" style="box-shadow: 0 12px 15px rgba(0, 0, 0, 0.02);">
<div class="card-body p-5">
<label for="password-input" class="form-label fw-bold">Password</label>
<input type="password" class="form-control" id="password-input" autocomplete="off"
aria-autocomplete="list"
aria-label="Password" aria-describedby="passwordHelp">
<div class="password-meter">
<div class="meter-section rounded me-2"></div>
<div class="meter-section rounded me-2"></div>
<div class="meter-section rounded me-2"></div>
<div class="meter-section rounded"></div>
</div>
<div id="passwordHelp" class="form-text text-muted">Use 8 or more characters with a mix of
letters, numbers &
symbols.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
3. Add the following CSS code to style the password strength meter. This code defines the appearance of the meter sections and differentiates them based on strength.
.password-meter {
display: flex;
height: 5px;
margin-top: 10px;
}
.meter-section {
flex: 1;
background-color: #ddd;
}
.weak {
background-color: #ff4d4d;
}
.medium {
background-color: #ffd633;
}
.strong {
background-color: #00b300;
}
.very-strong {
background-color: #009900;
}
4. To make the password strength meter functional, add the following JavaScript code. This code calculates the strength of the entered password and updates the meter sections accordingly.
const passwordInput = document.getElementById('password-input');
const meterSections = document.querySelectorAll('.meter-section');
passwordInput.addEventListener('input', updateMeter);
function updateMeter() {
const password = passwordInput.value;
let strength = calculatePasswordStrength(password);
// Remove all strength classes
meterSections.forEach((section) => {
section.classList.remove('weak', 'medium', 'strong', 'very-strong');
});
// Add the appropriate strength class based on the strength value
if (strength >= 1) {
meterSections[0].classList.add('weak');
}
if (strength >= 2) {
meterSections[1].classList.add('medium');
}
if (strength >= 3) {
meterSections[2].classList.add('strong');
}
if (strength >= 4) {
meterSections[3].classList.add('very-strong');
}
}
function calculatePasswordStrength(password) {
const lengthWeight = 0.2;
const uppercaseWeight = 0.5;
const lowercaseWeight = 0.5;
const numberWeight = 0.7;
const symbolWeight = 1;
let strength = 0;
// Calculate the strength based on the password length
strength += password.length * lengthWeight;
// Calculate the strength based on uppercase letters
if (/[A-Z]/.test(password)) {
strength += uppercaseWeight;
}
// Calculate the strength based on lowercase letters
if (/[a-z]/.test(password)) {
strength += lowercaseWeight;
}
// Calculate the strength based on numbers
if (/\d/.test(password)) {
strength += numberWeight;
}
// Calculate the strength based on symbols
if (/[^A-Za-z0-9]/.test(password)) {
strength += symbolWeight;
}
return strength;
}
That’s it! You’ve successfully implemented a Password Strength Meter. This tool enhances user security by guiding them to create stronger passwords. Feel free to customize the CSS styles to match your project’s design.
Similar Code Snippets:
Dashed Text Shadow Using CSS
19+ JavaScript Search Box for Table Example & Tutorial
Increment and Decrement Counter in JavaScript
JavaScript Barcode Generator Code with Example
Virtual Keyboard JavaScript Source Code
Bootstrap Multiselect Dropdown with Checkboxes
Neumorphism Login and Signup Form
Animated Number Counter JS HTML Demo & Tutorial
Product Card Using Bootstrap 5
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.