"Login Form/Sign In Form"
Bootstrap 4.1.1 Snippet by vaidehi1234

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>Form Design</title> <link rel="stylesheet" type="text/css" href="css/form2.css"> </head> <body> <div class="login"> <h2>Sign In</h2> <form> <div class="input-group"> <input type="text" name="" required="required"> <span>Username</span> </div> <div class="input-group"> <input type="password" name="" required="required"> <span>Password</span> </div> <div class="input-group"> <input type="submit" name="" value="login"> </div> </form> <a href="#" style="text-align: center;">Forgot Password?</a> </div> </div> </body> </html> </html>
body { margin: 0; padding:0; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: poppins,sans-serif; background-color:#42f4c2; } .login { text-align: center; width: 350px; box-sizing: border-box; padding: 40px; background:#fff; border: 2px solid black; } .login h2 { margin: 0 0 20px; padding: 0; font-size: 30px; text-transform: uppercase; } .login .input-group { position: relative; width: 100%; margin-bottom: 25px; } .login .input-group input { height: 50px; width: 100%; padding: 0 20px; box-sizing: border-box; font-size: 18px; outline: none; border:1px solid #000; } .login .input-group span { position: absolute; top:12px; left: 20px; padding: 0; transition: 0.5s; pointer-events: none; background:#fff; text-transform: uppercase; } .login .input-group input:focus~span, .login .input-group input:valid~span { top:-12px; left: -12px; font-size: 12px; padding: 2px 4px; border: 1px solid #000; background:#42f4c2; } .login .input-group input[type="submit"] { background: #42f4c2; border: none; box-shadow: none; text-transform: uppercase; cursor: pointer; font-weight: 600; } .login .input-group input[type="submit"]:hover { background: #ffc107; } .login a { color: #262626; display: block; text-align: left; color: #666; } .login a span { color: #262626; font-weight: 600; }

Related: See More

Argon Design System
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]
login-form

Questions / Comments: