"Bootstrap 5 Login Form"
Bootstrap 4.1.1 Snippet by w3hubs

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- W3hubs.com - Download Free Responsive Website Layout Templates designed on HTML5 CSS3,Bootstrap,Tailwind CSS which are 100% Mobile friendly. w3Hubs all Layouts are responsive cross browser supported, best quality world class designs. --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300i,400,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"> <title>Bootstrap 5 Login Form</title> <style> body { padding: 0; margin: 0; height: 100vh; font-family: "Nunito Sans"; } .form-control { line-height: 2; } .bg-custom { background-color: #6C63FF; } .btn-custom { background-color: #3e3d56; color: #fff; } .btn-custom:hover { background-color: #33313f; color: #fff; } label { color: #fff; } a, a:hover { color: #fff; text-decoration: none; } a, a:hover { text-decoration: none; } @media(max-width: 932px) { .display-none { display: none !important; } } </style> </head> <body> <div class="row m-0 h-100"> <div class="col p-0 text-center d-flex justify-content-center align-items-center display-none"> <img src="https://w3hubs.com/Bootstrap-5-Login-Form/login.svg" class="w-100"> </div> <div class="col p-0 bg-custom d-flex justify-content-center align-items-center flex-column w-100"> <form class="w-75" action="#"> <div class="mb-3"> <label for="exampleFormControlInput1" class="form-label">Username</label> <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="username" required> </div> <div class="mb-3"> <label for="exampleFormControlInput2" class="form-label">Password</label> <input type="text" class="form-control" id="exampleFormControlInput2" placeholder="password" required> </div> <div class="row"> <div class="col-md-6"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Keep me logged in </label> </div> </div> </div> <button type="button" class="btn btn-custom btn-lg btn-block mt-3">Login Now</button> </form> </div> </div> </body> </html>
/*https://w3hubs.com/bootstrap-5-login-form/*/

Related: See More

Material Dashboard
login-form
Login Form
Bootstrap Two Login Form

Questions / Comments: