Password reset template

Bootstrap 5 Password reset template component

Responsive Password reset template built with Bootstrap 5. Simple examples of a password reset templates in card and modal form.

Basic example

Use cards to make simple password reset templates.

Password Reset

Enter your email address and we'll send you an email with instructions to reset your password.

Reset password
Login Register
Edit in sandbox 
        
            
                <div class="card text-center" style="width: 300px;">
                    <div class="card-header h5 text-white bg-primary">Password Reset</div>
                    <div class="card-body px-5">
                        <p class="card-text py-2">
                            Enter your email address and we'll send you an email with instructions to reset your password.
                        </p>
                        <div data-mdb-input-init class="form-outline">
                            <input type="email" id="typeEmail" class="form-control my-3" />
                            <label class="form-label" for="typeEmail">Email input</label>
                        </div>
                        <a href="#" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary w-100">Reset password</a>
                        <div class="d-flex justify-content-between mt-4">
                            <a class="" href="#">Login</a>
                            <a class="" href="#">Register</a>
                        </div>
                    </div>
                </div>

Modal

Use the modal form to make a simple password reset template in modal form.

Edit in sandbox 
        
            
                <!-- Button trigger modal -->
                <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
                    Modal form
                </button>

                <!-- Modal -->
                <div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" 
                     aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
                    <div class="modal-dialog" style="width: 300px;">
                        <div class="modal-content text-center">
                            <div class="modal-header h5 text-white bg-primary justify-content-center">
                                Password Reset
                            </div>
                            <div class="modal-body px-5">
                                <p class="py-2">
                                    Enter your email address and we'll send you an email with instructions to reset your password.
                                </p>
                                <div data-mdb-input-init class="form-outline">
                                    <input type="email" id="typeEmail" class="form-control my-3" />
                                    <label class="form-label" for="typeEmail">Email input</label>
                                </div>
                                <a href="#" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary w-100">Reset password</a>
                                <div class="d-flex justify-content-between mt-4">
                                    <a class="" href="#">Login</a>
                                    <a class="" href="#">Register</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>