Many times when a developer or website designer try to design a Login page for a website then they need a basic frame to or we can say a basic template which give a redefine layout. In that layout many many basic structure of the login page components are present. This way the website designer save lots of work and times by using that template. We know the importance of times and work so in this post we provide Simple bootstrap Login form with code
In this Template or layout you get two type of files one file have the html and bootstrap code name is "Login.html" other the container the style of the login form called "login-style.css".
Inside login.html file we use html and bootstrap. HTML use for the overall structure of the login page and Bootstrap use to give the responsive to the login form. That's means here you find the login form with responsive layout.
Explain the Login form
- In Login form first implement Bootstrap between the <link> tag and <sript>tag.
- Then create a basic form which contain two input field one is username or user-mail and other is password and a Login button.
- Create a row and divided that row with three division of "col-md-4".
- skip first and last division and put the form code in the middle division so that the login form is align in center.
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/c272d83304.js" crossorigin="anonymous"></script>
<title>schoolsecurity</title>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/login-form.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<div class="loginform">
<form action="login" method="post">
<h3 class="text-center">Login Form</h3>
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="username" aria-describedby="emailHelp" placeholder="Enter user ID" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<center><button type="submit" class="btn btn-primary">Login</button></center>
</form>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body></html>
Explain the login-style.css file
- In this file, style of login file is written with completely using css.
- Here simple we make the login form to align the center by using css.
Login-style.css
.loginform{
background-color: #f7f7f7;
border-radius: 30xp;
padding-top: 30px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
margin-top: 100px;
}
How to use both the file in our project?
- Copy both the code i,e, Login.html and Login-style.css
- give name as your wish
- if you change the name attribute of the field then change it
- end just add the project directory of our
- done
Tags:
programming