Bootstrap Login Form
Last Updated :
08 Apr, 2024
This Bootstrap login form utilizes Bootstrap’s styling for a simple and sleek login interface, enhancing user experience with its responsive design and pre-defined form components for username, password, and a submit button.
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...