{"id":8759,"date":"2024-01-21T17:55:00","date_gmt":"2024-01-21T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8759"},"modified":"2024-01-22T15:56:04","modified_gmt":"2024-01-22T10:56:04","slug":"reset-password-form-bootstrap-5","status":"publish","type":"post","link":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/","title":{"rendered":"Reset Password Form Bootstrap 5"},"content":{"rendered":"

This code demonstrates how to create a “Reset Password” form using Bootstrap 5. It designs a user-friendly form for resetting passwords, making it helpful for managing user account security. The code utilizes Bootstrap’s CSS framework to style the form and ensure a responsive design, enhancing the user experience.<\/p>\n

You can use this code on your website’s login or user account management page<\/a> to provide a user-friendly “Reset Password” form. It benefits you by enhancing the security of user accounts, improving the overall user experience with Bootstrap’s styling, and simplifying the password reset process for your users.<\/p>\n

How to Create Reset Password Form Bootstrap 5<\/h2>\n

1. Before we begin, make sure to include Bootstrap 5<\/a> in your project. You can do this by adding the following code to the <head><\/code> section of your HTML file:<\/p>\n

<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\"><\/pre>\n
2. Now, let’s create the HTML structure for the “Reset Password” form. We’ll use Bootstrap classes for styling. Here’s the code:<\/p>\n
<div class=\"card login-form\">\r\n\t<div class=\"card-body\">\r\n\t\t<h3 class=\"card-title text-center\">Reset password<\/h3>\r\n\t\t\r\n\t\t<div class=\"card-text\">\r\n\t\t\t<form>\r\n\t\t\t\t<div class=\"form-group\">\r\n\t\t\t\t\t<label for=\"exampleInputEmail1\">Enter your email address and we will send you a link to reset your password.<\/label>\r\n\t\t\t\t\t<input type=\"email\" class=\"form-control form-control-sm mt-2\" placeholder=\"Enter your email address\">\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t\t<button type=\"submit\" class=\"btn btn-primary btn-block\">Send password reset email<\/button>\r\n\t\t\t<\/form>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n
3. If you want to further customize the form’s appearance, you can add your own CSS styles. The following CSS code can be modified to suit your design preferences.<\/p>\n
html,body { height: 100%; }\r\n\r\nbody{\r\n\tdisplay: -ms-flexbox;\r\n\tdisplay: -webkit-box;\r\n\tdisplay: flex;\r\n\t-ms-flex-align: center;\r\n\t-ms-flex-pack: center;\r\n\t-webkit-box-align: center;\r\n\talign-items: center;\r\n\t-webkit-box-pack: center;\r\n\tjustify-content: center;\r\n\tbackground-color: #f5f5f5;\r\n}\r\n\r\nform{\r\n\tpadding-top: 10px;\r\n\tfont-size: 14px;\r\n\tmargin-top: 30px;\r\n}\r\n\r\n.card-title{ font-weight:300; }\r\n\r\n.btn{\r\n\tfont-size: 14px;\r\n\tmargin-top:20px;\r\n}\r\n\r\n.login-form{ \r\n\twidth:320px;\r\n\tmargin:20px;\r\n}\r\n\r\n.sign-up{\r\n\ttext-align:center;\r\n\tpadding:20px 0 0;\r\n}\r\n\r\nspan{\r\n\tfont-size:14px;\r\n}<\/pre>\n
That’s it! You’ve successfully created a “Reset Password” form, making it easier for your users to reset their passwords when needed. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code demonstrates how to create a “Reset Password” form using Bootstrap 5. It designs a user-friendly form for resetting…<\/p>\n","protected":false},"author":1,"featured_media":8775,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[123,232],"tags":[],"class_list":["post-8759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-forms"],"acf":[],"yoast_head":"\nReset Password Form Bootstrap 5 — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reset Password Form Bootstrap 5 — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-21T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:56:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Reset Password Form Bootstrap 5\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\"},\"wordCount\":223,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png\",\"articleSection\":[\"Bootstrap\",\"Forms\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\",\"url\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\",\"name\":\"Reset Password Form Bootstrap 5 — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:04+00:00\",\"description\":\"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png\",\"width\":1280,\"height\":960,\"caption\":\"Reset Password Form Bootstrap 5\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Reset Password Form Bootstrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reset Password Form Bootstrap 5 — CodeHim","description":"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"Reset Password Form Bootstrap 5 — CodeHim","og_description":"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-21T17:55:00+00:00","article_modified_time":"2024-01-22T10:56:04+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Reset Password Form Bootstrap 5","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:04+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/"},"wordCount":223,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png","articleSection":["Bootstrap","Forms"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/","url":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/","name":"Reset Password Form Bootstrap 5 — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:04+00:00","description":"Here is a free code snippet to create a Reset Password Form Bootstrap 5. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Reset-Password-Form-Bootstrap-5.png","width":1280,"height":960,"caption":"Reset Password Form Bootstrap 5"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/bootstrap\/reset-password-form-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https:\/\/codehim.com\/category\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"Reset Password Form Bootstrap 5"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":4675,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8759"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8775"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}