Hey everyone. Today we will create forget password ui with bootstrap 5. For this section we will not use any custom css or library, So we will create reset forget password card using only bootstrap 5 classes & utilities. As we now before we start you should setup bootstrap 5 project or you can use cdn or read below article
How to install & setup bootstrap 5
Bootstrap 5 Forgot Password Example
1) Bootstrap 5 simple forget password card.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Forgot Password</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container d-flex flex-column">
<div class="row align-items-center justify-content-center
min-vh-100">
<div class="col-12 col-md-8 col-lg-4">
<div class="card shadow-sm">
<div class="card-body">
<div class="mb-4">
<h5>Forgot Password?</h5>
<p class="mb-2">Enter your registered email ID to reset the password
</p>
</div>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" name="email" placeholder="Enter Your Email"
required="">
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-primary">
Reset Password
</button>
</div>
<span>Don't have an account? <a href="sign-in.html">sign in</a></span>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 5 Forgot Password card image
2) Border style forget password card.
<div class="container d-flex flex-column">
<div class="row align-items-center justify-content-center
min-vh-100 g-0">
<div class="col-12 col-md-8 col-lg-4 border-top border-3 border-primary">
<div class="card shadow-sm">
<div class="card-body">
<div class="mb-4">
<h5>Forgot Password?</h5>
<p class="mb-2">Enter your registered email ID to reset the password
</p>
</div>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-control" name="email" placeholder="Enter Your Email"
required="">
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-primary">
Reset Password
</button>
</div>
<span>Don't have an account? <a href="sign-in.html">sign in</a></span>
</form>
</div>
</div>
</div>
</div>
</div>
bootstrap 5 registered email
