Posted by Forget Password Page Design in Bootstrap in Hindi – इस Article में हम Bootstrap Forget password Page को Design करेंगे। Forget Password Page के बाद में Change password Page को भी Design करना होगा। तो हम इस Article में दोनों Page Design करेंगे।
Bootstrap का use करने से हम Web Pages को आसानी से Responsive बना सकते है। इसके साथ ही Bootstrap का use करने से Design काफी आसान हो जाती है। इसलिए अगर आप एक अच्छा Web Designer बनाना चाहते है। तो Bootstrap जरूर सीखे। ये सीखना भी काफी आसान है।
Forget Password Page Design in Bootstrap in Hindi
सबसे पहले Forget password का Page design करते है।
जैसे हमने पिछले Web Design tutorial में Login का Page Design किया था। उसी तरह से किया गया है। Form उसी तरह Create किया गया है। CSS भी Same use की गयी है। ज्यादा HTML form में कुछ करना नहीं रहता है। आप आसानी से इसे Design कर सकते है।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Forget Password</title> <link rel='stylesheet' id='googleFonts-css' href='https://fonts.googleapis.com/css2?family=Laila%3Awght%40500&display=swap&ver=5.7.6' type='text/css' media='all' /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <style type="text/css"> /* Login Design */ body { background: #f1f1f1; overflow-x: hidden; font-family: laila,serif; } form { background: #fff; padding: 25px; box-shadow: 0 1px 3px rgb(0 0 0 / 13%); } .sign-head { padding-bottom: 25px; } .register-form-container { max-width:430px; margin-top: 180px; margin-bottom: 100px; } .register-form-container input { height: 40px !important; } .register-row { margin-right: calc(-.5 * var(--bs-gutter-x)) !important; margin-left: calc(-.5 * var(--bs-gutter-x)) !important; } .register-form { border-radius: 15px; } .register-btn { width: 100%; height: 47px; background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%); text-transform: capitalize; color: #fff; font-size: 16px; font-weight: 500; transition: all 0.5s ease 0s; } .register-form .form-group { margin-bottom: 30px; } </style> </head> <body> <div class="mx-auto register-form-container"> <form class="register-form"> <h2 class="sign-head"> Forget Password </h2> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Email Address" name="email"> </div> <button type="submit" class="register-btn btn btn-primary" name="login">Forget Password</button> </div> </form> </div> </div> </body> </html>
ये हमारा Forget Password का Page बन गया है।
.png "Forget Password Page Design in Bootstrap in Hindi 1")
अब हम Change Password का Page Design करेंगे।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Forget Password</title> <link rel='stylesheet' id='googleFonts-css' href='https://fonts.googleapis.com/css2?family=Laila%3Awght%40500&display=swap&ver=5.7.6' type='text/css' media='all' /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <style type="text/css"> /* Login Design */ body { background: #f1f1f1; overflow-x: hidden; font-family: laila,serif; } form { background: #fff; padding: 25px; box-shadow: 0 1px 3px rgb(0 0 0 / 13%); } .sign-head { padding-bottom: 25px; } .register-form-container { max-width:430px; margin-top: 180px; margin-bottom: 100px; } .register-form-container input { height: 40px !important; } .register-row { margin-right: calc(-.5 * var(--bs-gutter-x)) !important; margin-left: calc(-.5 * var(--bs-gutter-x)) !important; } .register-form { border-radius: 15px; } .register-btn { width: 100%; height: 47px; background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%); text-transform: capitalize; color: #fff; font-size: 16px; font-weight: 500; transition: all 0.5s ease 0s; } .register-form .form-group { margin-bottom: 30px; } </style> </head> <body> <div class="mx-auto register-form-container"> <form class="register-form"> <h2 class="sign-head"> Change Password </h2> <div class="form-group"> <input type="password" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Password" name="email"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Password" name="email"> </div> <button type="submit" class="register-btn btn btn-primary" name="login">Change Password</button> </div> </form> </div> </div> </body> </html>
.png "Forget Password Page Design in Bootstrap in Hindi 2")