Simple Login Form

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Simple Login Form</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <style> .login-form { width: 340px; margin: 50px auto; font-size: 15px; } .login-form form { margin-bottom: 15px; background: #f7f7f7; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px; } .login-form h2 { margin: 0 0 15px; } .form-control, .btn { min-height: 38px; border-radius: 2px; } .btn { font-size: 15px; font-weight: bold; } </style> </head> <body> <div class="login-form"> <form action="/examples/actions/confirmation.php" method="post"> <h2 class="text-center">Log in</h2> <div class="form-group"> <input type="text" class="form-control" placeholder="Username" required="required"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password" required="required"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Log in</button> </div> <div class="clearfix"> <label class="float-left form-check-label"><input type="checkbox"> Remember me</label> <a href="#" class="float-right">Forgot Password?</a> </div> </form> <p class="text-center"><a href="#">Create an Account</a></p> </div> </body> </html>

This is an example of a simple login page, designed using CSS, Html, and Bootstrap framework 4. The CSS styles and fonts are imported to the code using their URLs. The form is given a width of 350px and a margin of 50px auto. The form consists of input text fields to enter user name and password, 'Remember me' checkbox, and 'Forgot Password' and "Create Account' links to other forms. The login card is given a background color of #f7f7f7, and a box-shadow style of 0px 2px 2px rgba(0, 0, 0, 0.3). The information card title is given a margin value of 0 0 15px. The card information is displayed using a font-size of 15px. The 'Login' button is created as a primary type button and given the styles of font-size as 15px, and font-weight as bold to highlight the button name. Source: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=simple-login-form

Simple Login Form

Post Comment or Questions Cancel reply

Several Related Snippets