Using a Login page we authenticate an user to access our resources. While designing a web application we always deal with login page as the first item. Creating an advanced Login page is not so easy as we are thinking. Morden login pages comes with many functionalities such as Validating user against database, Validating Email ID, Form Validations or Captcha. In application designing Login page is a single unit of User Management module. Are you Searching for a Responsive Login page to implement in your application? If so you are in the correct place. In this demo app using the below example I am designing a responsive Bootstrap Login page.
BootStrap 5 Grid Framework
Bootstrap is majorly used for UI development in applications because of the incredible amount of UI options it provides like type, head or media objects. It is easy for front-end designers to get started by providing a host of html templates showcasing some of the base functionality and layouts available, including some neat ones such as sticky footers and login pages. Includes responsive grid framework, a fixed and fluid grid framework, typography styles, a variety of button and form styles, nav bars and tabs, plus other UI elements like breadcrumbs, breadcrumbs, tooltips and progress bars. Bootstrap truly shines in the JavaScript area. It offers a programmatic API that allow developers to use Bootstrap plugins purely through the JavaScript API.
Don’t work hard to create a login page from scratch. Just Copy n Paste the below code and modify as you wants.
BootStrap 5 User Login page Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Responsive Bootstrap Login page Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <h2 class="text-center login-title">Customer Login</h2> <div class="loginBase rounded"> <form class="frmLogin"> <input type="text" class="form-control" placeholder="Email" required autofocus /> <input type="password" class="form-control" placeholder="Password" required /> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <div class="alignParallal extraPadding"><input type="checkbox" value="true" /> Remember me</div> <div class="alignParallal alignRight"><a href="#" class="pull-right need-help">Need help? </a></div> <span class="clearfix"></span> </form> </div> <div class="alignCenter"> <div class="alignParallal"><a href="#" class="text-center extLinks">Register with Us</a></div> <div class="alignParallal extraPadding"> | </div> <div class="alignParallal"><a href="#" class="text-center extLinks">Recover Credentials</a></div> </div> </div> </div> </div> </body> </html>
Responsive mobile first Login page CSS (master.css)
.frmLogin { max-width: 360px; padding: 15px; margin: 0 auto; }
.frmLogin .form-control { position: relative; font-size: 17px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.frmLogin .form-control:focus { z-index: 2; }
.frmLogin input[type="text"] { margin-bottom: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-top-radius: 0; border-bottom-bottom-radius: 0; }
.frmLogin input[type="password"] { margin-bottom: 6px; border-top-left-radius: 0; border-top-right-radius: 0; border-top-top-radius: 0; border-top-bottom-radius: 0; }
.login-title { display: block; color: #000; font-size: 28px; font-weight: 400; }
.need-help { margin-top: 10px; }
.extLinks { display: block; margin-top: 10px; }
.rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.alignParallal { float: left; }
.alignRight { float: right; }
.extraPadding { padding-top: 8px; }
.alignCenter { margin: 0 auto; width: 241px; }
.loginBase { margin-top: 20px; padding: 20px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); }
