Lesson 21: Building a Login & Signup Form in Bootstrap

—

by

admin
in
Module 1: Introduction to Bootstrap 2025

Module 2: Bootstrap Grid System & Responsive Layouts

Module 3: Bootstrap Components & UI Elements

Module 4: Navigation & Menus in Bootstrap

Module 5: Advanced Bootstrap Features

Module 6: Forms, Authentication & Data Handling

Module 7: Bootstrap & JavaScript Integration

Module 8: Bootstrap with React, Vue, and Angular

📌 Objective: Learn how to create responsive login and signup forms using Bootstrap components and validation.

🔹 1. Introduction to Login & Signup Forms

Login and signup forms are essential UI components for authentication in web applications.

💡 Why Use Bootstrap for Forms?
✔️ Pre-styled form elements – Saves development time.
✔️ Built-in validation – Ensures data accuracy.
✔️ Fully responsive – Works on all devices.

🔹 2. Building a Responsive Login Form

A login form typically includes email, password fields, and a submit button.

✅ Example: Basic Login Form

html
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card shadow">
<div class="card-body">
<h3 class="text-center">Login</h3>
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
<p class="text-center mt-3">
<a href="#">Forgot Password?</a>
</p>
</div>
</div>
</div>
</div>
</div>

🔹 What happens?

  • The login form is centered and styled using Bootstrap classes.
  • It includes email and password fields with a forgot password link.

🔹 3. Enhancing the Login Form with Icons

You can add icons inside input fields to improve user experience.

✅ Example: Login Form with Icons

html
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>

🔹 What happens?

  • Icons appear inside the input fields for better UX.

🔹 4. Creating a Signup Form

A signup form typically includes name, email, password, and confirm password fields.

✅ Example: Signup Form

html
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="card shadow">
<div class="card-body">
<h3 class="text-center">Sign Up</h3>
<form>
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" placeholder="Enter your name">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Create a password">
</div>
<div class="mb-3">
<label class="form-label">Confirm Password</label>
<input type="password" class="form-control" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-success w-100">Sign Up</button>
</form>
<p class="text-center mt-3">
Already have an account? <a href="#">Login</a>
</p>
</div>
</div>
</div>
</div>
</div>

🔹 What happens?

  • The signup form includes name, email, password, and confirm password fields.
  • It also has a link to redirect users to the login page.

🔹 5. Adding Form Validation

You can add Bootstrap’s built-in validation to prevent invalid form submissions.

✅ Example: Form with Validation

html
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" required>
<div class="invalid-feedback">Password is required.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
document.querySelector("form").addEventListener("submit", function(event) {
if (!this.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
this.classList.add("was-validated");
});
</script>

🔹 What happens?

  • The form prevents submission if fields are empty.
  • Error messages appear if validation fails.

🔹 6. Adding Social Login Buttons

You can add Google and Facebook login buttons.

✅ Example: Social Login Buttons

html
<div class="d-grid gap-2">
<button class="btn btn-danger"><i class="bi bi-google"></i> Sign in with Google</button>
<button class="btn btn-primary"><i class="bi bi-facebook"></i> Sign in with Facebook</button>
</div>

🔹 What happens?

  • Users can log in using Google or Facebook.

🔹 7. Designing a Login & Signup Modal

Instead of separate pages, you can use modals for login & signup.

✅ Example: Login Modal

html
<!-- Button to Open Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
Open Login
</button>

<!-- Modal -->
<div class="modal fade" id="loginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
</div>
</div>
</div>
</div>

🔹 What happens?

  • A modal pops up when clicking the login button.

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Forms.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What Bootstrap class is used for form validation?
a) .form-valid
b) .was-validated
c) .form-validation
d) .check-form

✅ Correct Answer: b) .was-validated

2️⃣ What class adds icons inside input fields?
a) .input-icons
b) .input-group-text
c) .form-icons
d) .form-inputs

✅ Correct Answer: b) .input-group-text

📌 True or False

3️⃣ Bootstrap modals can be used for login forms.
✅ Answer: True

4️⃣ Forms require JavaScript for validation in Bootstrap.
✅ Answer: False (Bootstrap has built-in validation using CSS.)

🎯 Practical Challenge

✅ Create a responsive login form with icons inside inputs.
✅ Add social login buttons (Google & Facebook).
✅ Build a signup modal that opens on button click.
✅ Post your solution in the discussion forum for feedback!

🎓 Lesson Summary

✅ Bootstrap forms (.form-control) provide clean input fields.
✅ Validation (.was-validated) prevents incorrect submissions.
✅ Icons & social login buttons improve usability.
✅ Modals (.modal) allow popup login/signup forms.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *