"Login"
Bootstrap 4.1.1 Snippet by kumarsk96

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> <head> <title> Login</title> <link rel="stylesheet" type="text/css" href="Login.css"> </head> <body> <div class="loginbox"> <img src="logo.png." class="avater"> <form class="Login" action="Login.php" method="post"> <h1> Login Here</h1> <p> Username</p> <input type="text" name="name" placeholder="Enter The Username"> <p> Password </p> <input type="Password" name="Password " placeholder=" Enter the Password"> <input type="submit" name="" value="Login"><br> <a href=""> Lost Password</a><br> <a href="">Don't have an account </a> </form> </div> </body> </html>
body{ margin: 0; padding: 0; background:url(login.jpg); background-position: center; background-size: cover; font-family: sans-serif; background-repeat: no-repeat; height: 1000px; } .loginbox{ width: 320px; height: 420px; background: #000; color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); box-sizing: border-box; padding: 70px 30px; } .avater{ width: 100%; height: 100px; border-radius: -50%; position: absolute; top: -50%; left: calc(50%-50px); } h1{ margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .loginbox p{ margin: 0; position: 0; font-weight: bold; } .loginbox input{ width: 100%; margin-bottom: 20px; } .loginbox input[type="text"],input[type="password"]{ border:none; border-bottom: 1px solid #fff; background: transparent; height: 40px; color: #fff; font-size: 16px; } .loginbox input[type="submit"]{ border: none; border-bottom: 1px solid #fff; outline: none; height: 40px; background: red; color: #fff; font-size: 18px; border-radius: 20px; } .loginbox input[type="submit"]:hover{ cursor: pointer; background: #ffc107; color: #000; } .loginbox a{ text-decoration: none; font-size: 12px; line-height: 20px; color: darkgrey; } .loginbox a:hover: { color: #ffc107; }

Related: See More

Paper Kit
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: