Bootstrap Login Form
Last Updated :
03 May, 2024
A Bootstrap Login Form refers to a web interface designed using the Bootstrap framework, offering a responsive layout for users to input credentials for authentication, typically comprising fields for username/email and password, often with additional features like validation and customization.
Approach
- Design a Bootstrap-form structure using HTML with appropriate form elements email, password, and login button.
- Apply Bootstrap classes to form elements, labels, and buttons for a clean and responsive design. Utilize grid classes for proper alignment.
- The “required” attribute is used to indicate that the user must fill out a form input field before submitting the form
- Also, add a paragraph and a link to create a new user account if a user is not registered.
Example: In this example, we will see the implementation of a Form with the help of Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no" />
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Bootstrap Form</title>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<form id="registrationForm" action="">
<div class="form-group">
<label for="email">
Email
</label>
<input type="email"
class="form-control"
id="email"
placeholder="Email" required />
</div>
<div class="form-group">
<label for="password">
Password
</label>
<input type="password"
class="form-control"
id="password"
placeholder="Password"
required />
</div>
<button class="btn btn-danger">
Login
</button>
</form>
<p class="mt-3">
Not registered?
<a href="#">Create an
account</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Login Form
Share your thoughts in the comments
Please Login to comment...