→ Isaac Winslow
→ Password Reset Form

Password Reset Form

Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

This bootstrap css example is contributed by Isaac Winslow, on 24-Nov-2024. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Form

Author Isaac Winslow

7.8k

v.4.6

Fork Fullscreen

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">
            <div class="text-center mb-4">
                <h2 class="mb-2">Reset Password</h2>
                <p class="text-muted">Follow the steps to reset your password securely</p>
            </div>

<div class="step-content" id="step1">
                        <h5 class="mb-4">Email Verification</h5>
                        <form>
                            <div class="mb-4">
                                <label class="form-label">Email Address</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-envelope"></i>
                                        </span>
                                    <input type="email" class="form-control" placeholder="Enter your email">
                                </div>
                                <div class="form-text">We'll send a verification code to this email</div>
                            </div>
                            <button class="btn btn-primary w-100">Send Verification Code</button>
                        </form>
                    </div>

<div class="step-content d-none" id="step2">
                        <h5 class="mb-4">Enter Verification Code</h5>
                        <p class="text-muted mb-4">We've sent a verification code to your email. Please enter it
                            below.</p>
                        <div class="d-flex justify-content-center mb-4">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                            <input type="text" class="verification-input" maxlength="1">
                        </div>
                        <div class="text-center mb-4">
                            <span class="text-muted">Didn't receive the code? </span>
                            <a href="#" class="text-decoration-none">Resend</a>
                        </div>
                        <button class="btn btn-primary w-100">Verify Code</button>
                    </div>

<div class="step-content d-none" id="step3">
                        <h5 class="mb-4">Create New Password</h5>
                        <form>
                            <div class="mb-4">
                                <label class="form-label">New Password</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    <input type="password" class="form-control" placeholder="Enter new password">
                                    <span class="input-group-text password-toggle">
                                            <i class="fas fa-eye"></i>
                                        </span>
                                </div>
                                <div class="password-strength mt-2">
                                    <div class="strength-meter bg-danger" style="width: 60%"></div>
                                </div>
                            </div>

<div class="mb-4">
                                <label class="form-label">Confirm Password</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                    <input type="password" class="form-control" placeholder="Confirm new password">
                                    <span class="input-group-text password-toggle">
                                            <i class="fas fa-eye"></i>
                                        </span>
                                </div>
                            </div>

<div class="mb-4">
                                <h6 class="mb-2">Password Requirements:</h6>
                                <ul class="requirement-list list-unstyled">
                                    <li class="valid">
                                        <i class="fas fa-check-circle me-2"></i>
                                        At least 8 characters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include uppercase letters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include special characters
                                    </li>
                                    <li>
                                        <i class="fas fa-circle me-2"></i>
                                        Include numbers
                                    </li>
                                </ul>
                            </div>

<button class="btn btn-primary w-100">Reset Password</button>
                        </form>
                    </div>

<div class="step-content d-none text-center" id="success">
                        <div class="success-checkmark">
                            <i class="fas fa-check"></i>
                        </div>
                        <h5 class="mb-3">Password Reset Successful!</h5>
                        <p class="text-muted mb-4">Your password has been successfully reset. You can now log in
                            with your new password.</p>
                        <a href="#" class="btn btn-primary">Back to Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

yash from
amr from ta keow copy korbe nha .korle tui morog chor

Author:
rimon majumder

3 months ago

170

v.4.6
Form Wave
Form Wave

Author:
Rami AlAjo

1 year ago

2.1k

v.4.6
NewsPortal Full Website

Author:
Zahid Hasan Riyad

2 weeks ago

245

v.5.3
new-validation-form
new-validation-form

Author:
Anonymous

3 weeks ago

109

v.4.6
Contact us form

Author:
Anonymous

2 years ago

8.2k

v.4.6
E- Commarce full website

Author:
Zahid Hasan Riyad

2 weeks ago

132

v.5.3
Login Form with input field validation, and display error or success messages using only HTML, CSS, and Bootstrap, you can follow this approach.
HTML: Form Structure: Contains fields for username and password with validation attributes (required, minlength). Feedback Messages: Placeholder div for dynamic error messages. CSS: Background Gradient: Applied to the body. Card Styling: Rounded corners and centered layout. Button Styling: Custom colors for the submit button. Validation Styling: Borders and error message styling. JavaScript: Validation Logic: Basic client-side validation to check if fields are empty or meet minimum length requirements. Feedback Messages: Display appropriate error or success messages based on validation.

Author:
zobaidul kaziex

1 year ago

8.6k

v.4.6
vulgh

Author:
Anonymous

2 weeks ago

84

v.5.3
Simple Login form

Author:
Prajwal Hallale

2 years ago

9.9k

v.5.3
Restrurant Website
Only for me

Author:
Zahid Hasan Riyad

1 month ago

148

v.5.3
E-Commarce

Author:
Anonymous

2 weeks ago

109

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

3 weeks ago

166

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent