Bootstrap Login Form

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:

Article Tags :

Bootstrap

Web Technologies