"Butter Cake css framework - Login page, login form "
Bootstrap 4.1.1 Snippet by HimasRafeek

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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login Page - Example Template</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css"> </head> <body> <!-- LOGIN CONTAINER --> <section class="login-page flex-center-center py-5 bg-light"> <!-- FORM --> <div class="w-100 mx-auto px-2" style="max-width: 400px"> <form action=""> <div class="text-center text-gray"> <h2 class="weight-500 mb-1">Login</h2> <p class="h4 mb-2 weight-300">Please login to proceed</p> </div> <div class="card overflow-unset mt-9 mb-1"> <div class="card-body"> <!-- AVATAR --> <div class="avatar-icon text-center"> <img src="https://placehold.it/128x128" alt="Avatar" class="img-circle img-cover card mb-2 ml-auto mr-auto p-1"> </div> <!-- EMAIL --> <div class="group"> <input type="text" class="input" placeholder="Email Address"> </div> <!-- PASSWORD --> <div class="group"> <input type="password" class="input" placeholder="Password"> </div> <!-- REMEMBER ME --> <div class="group"> <div class="custom-checkbox"> <input type="checkbox" value="remember me" id="rememberMe"> <label for="rememberMe" class="text-gray">Remember Me</label> </div> </div> <!-- LOGIN --> <div class="group"> <button class="btn primary block btn-lg weight-500">Login</button> </div> </div> </div> <!-- LINKS --> <div class="text-center weight-600 text-gray"> <a href="" class="text-gray">Sign Up</a> · <a href="" class="text-gray">Forgot Password</a> · <a href="" class="text-gray">Need Help?</a> </div> </form> </div> </section> <!-- STYLE --> <style> .login-page { min-height: 100vh; } .login-page .avatar-icon img { margin-top: -80px; width: 128px; height: 128px; } </style> <!-- jQuery first, then Butter Cake JS --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/js/butterCake.min.js"></script> </body> </html>

Related: See More

Paper Kit 2
Elegant Login Page
My Awesome Login Page
login-form

Questions / Comments: