Reset Password Form Free bootstrap Widget Template

Today, We want to share with you forgot password template bootstrap.In this post we will show you forgot password jquery, hear for Reset password form Bootstrap 4 we will give you demo and example for implement.In this post, we will learn about forgot password code in php with an example.

4 Bootstrap Forgot Password Templates

Added Bootstrap Libs

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

HTML

<div class="card login-form">
	<div class="card-body">
		<h3 class="card-title text-center">Reset password</h3>
		
		<div class="card-text">
			<form>
				<div class="form-group">
					<label for="exampleInputEmail1">Enter your email address and we will send you a link to reset your password.</label>
					<input type="email" class="form-control form-control-sm" placeholder="Enter your email address">
				</div>

				<button type="submit" class="btn btn-primary btn-block">Send password reset email</button>
			</form>
		</div>
	</div>
</div>

CSS Code

html,body { height: 100%; }

body{
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-align: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	background-color: #f5f5f5;
}

form{
	padding-top: 10px;
	font-size: 14px;
	margin-top: 30px;
}

.card-title{ font-weight:300; }

.btn{
	font-size: 14px;
	margin-top:20px;
}

.login-form{ 
	width:320px;
	margin:20px;
}

.sign-up{
	text-align:center;
	padding:20px 0 0;
}

span{
	font-size:14px;
}

Reset Password Email Template

index.html

<!doctype html>
<html lang="en-US">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Reset Password Email Template - www.pakainfo.com</title>
    <meta name="description" content="Reset Password Email Template.">
    <style type="text/css">
        a:hover {text-decoration: underline !important;}
    </style>
</head>

<body marginheight="0" topmargin="0" marginwidth="0" style="margin: 0px; background-color: #f2f3f8;" leftmargin="0">

    <table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#f2f3f8"
        style="@import url(https://fonts.googleapis.com/css?family=Rubik:300,400,500,700|Open+Sans:300,400,600,700); font-family: 'Open Sans', sans-serif;">
        <tr>
            <td>
                <table style="background-color: #f2f3f8; max-width:670px;  margin:0 auto;" width="100%" border="0"
                    align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="height:80px;"> </td>
                    </tr>
                    <tr>
                        <td style="text-align:center;">
                          <a href="https://pakainfo.com" title="logo" target="_blank" rel="noopener">
                            <img width="60" src="https://i.ibb.co/hL4XZp2/android-chrome-192x192.png" title="logo" alt="logo">
                          </a>
                        </td>
                    </tr>
                    <tr>
                        <td style="height:20px;"> </td>
                    </tr>
                    <tr>
                        <td>
                            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0"
                                style="max-width:670px;background:#fff; border-radius:3px; text-align:center;-webkit-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);-moz-box-shadow:0 6px 18px 0 rgba(0,0,0,.06);box-shadow:0 6px 18px 0 rgba(0,0,0,.06);">
                                <tr>
                                    <td style="height:40px;"> </td>
                                </tr>
                                <tr>
                                    <td style="padding:0 35px;">
                                        <h2 style="color:#1e1e2d; font-weight:500; margin:0;font-size:32px;font-family:'Rubik',sans-serif;">You have
                                            requested to reset your password</h2>
                                        <span
                                            style="display:inline-block; vertical-align:middle; margin:29px 0 26px; border-bottom:1px solid #cecece; width:100px;"></span>
                                        <p style="color:#455056; font-size:15px;line-height:24px; margin:0;">
                                            More Details.....
                                        </p>
                                        <a href="javascript:void(0);"
                                            style="background:#20e277;text-decoration:none !important; font-weight:500; margin-top:35px; color:#fff;text-transform:uppercase; font-size:14px;padding:10px 24px;display:inline-block;border-radius:50px;">Reset
                                            Password</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="height:40px;"> </td>
                                </tr>
                            </table>
                        </td>
                    <tr>
                        <td style="height:20px;"> </td>
                    </tr>
                    <tr>
                        <td style="text-align:center;">
                            <p style="font-size:14px; color:rgba(69, 80, 86, 0.7411764705882353); line-height:18px; margin:0 0 0;">© <strong>www.pakainfo.com</strong></p>
                        </td>
                    </tr>
                    <tr>
                        <td style="height:80px;"> </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

</html>

I hope you get an idea about bootstrap registration form.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Display Live Date Time using JQuery and JavaScript

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  CSS Glowing Border Blue Input Focus Highlights
  2. Read Also:  Angular 4 Custom Alert, Prompt, And Confirm Box
  3. Read Also:  php application global config and settings - php superglobals
  4. Read Also:  How To Clear Input Field on Focus using JavaScript?
  5. Read Also:  Vue JS Axios Post Request using Laravel Example
  6. Read Also:  Stripe Refund Api Tutorial Example From Scratch
  7. Read Also:  JavaScript Capitalize first letter uppercase, lowercase and camel case
  8. Read Also:  CRUD operation using AngularJS and WebAPI in ASP.NET WebForm
  9. Read Also:  Multiple Checkbox Check Uncheck All using jQuery
  10. Read Also:  Display Live Date Time using JQuery and JavaScript
CLOSEX