CHAPTER 08 Beginner

Bootstrap Forms

Updated: May 18, 2026

5 min read

# CHAPTER 8

Bootstrap Forms

1. Chapter Introduction

Forms are how users interact with your application — registration, login, search, checkout. Bootstrap's form system provides beautifully styled inputs, selects, checkboxes, radio buttons, switches, floating labels, and a complete validation system, all through simple CSS classes.

2. Learning Objectives

Style text inputs, textareas, and selects.

Use checkboxes, radio buttons, and toggle switches.

Implement floating labels.

Apply form validation feedback states.

Build a complete registration form.

3. Basic Form Controls

html

1234567891011121314151617181920212223242526272829303132333435363738394041424344

<form>
  <!-- Text input -->
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com" />
    <div class="form-text">We&#039;ll never share your email.</div>
  </div>

  <!-- Password -->
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" />
  </div>

  <!-- Textarea -->
  <div class="mb-3">
    <label for="bio" class="form-label">Bio</label>
    <textarea class="form-control" id="bio" rows="3"></textarea>
  </div>

  <!-- Select -->
  <div class="mb-3">
    <label for="country" class="form-label">Country</label>
    <select class="form-select" id="country">
      <option value="">Choose a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="in">India</option>
    </select>
  </div>

  <!-- Multiple select -->
  <div class="mb-3">
    <label class="form-label">Skills (hold Ctrl to select multiple)</label>
    <select class="form-select" multiple>
      <option>HTML</option>
      <option>CSS</option>
      <option>JavaScript</option>
      <option>Bootstrap</option>
    </select>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4. Checkboxes and Radio Buttons

html

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

<!-- Checkboxes -->
<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="terms" />
    <label class="form-check-label" for="terms">I agree to terms & conditions</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="newsletter" checked />
    <label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="disabled-check" disabled />
    <label class="form-check-label text-muted" for="disabled-check">Disabled option</label>
  </div>
</div>

<!-- Inline checkboxes -->
<div class="mb-3">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="mon" />
    <label class="form-check-label" for="mon">Monday</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="tue" />
    <label class="form-check-label" for="tue">Tuesday</label>
  </div>
</div>

<!-- Radio buttons -->
<div class="mb-3">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="plan" id="free" value="free" checked />
    <label class="form-check-label" for="free">Free Plan</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="plan" id="pro" value="pro" />
    <label class="form-check-label" for="pro">Pro Plan — $9/month</label>
  </div>
</div>

<!-- Toggle switches -->
<div class="mb-3">
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="darkMode" />
    <label class="form-check-label" for="darkMode">Dark Mode</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="notifications" checked />
    <label class="form-check-label" for="notifications">Email Notifications</label>
  </div>
</div>

5. Floating Labels

html

123456789101112131415161718192021222324

<!-- Floating labels (Bootstrap 5+) -->
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com" />
  <label for="floatEmail">Email address</label>
</div>

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatPassword" placeholder="Password" />
  <label for="floatPassword">Password</label>
</div>

<div class="form-floating mb-3">
  <select class="form-select" id="floatSelect">
    <option selected>Choose role</option>
    <option value="1">Admin</option>
    <option value="2">User</option>
  </select>
  <label for="floatSelect">Role</label>
</div>

<div class="form-floating mb-3">
  <textarea class="form-control" id="floatTextarea" placeholder="Message" style="height: 100px"></textarea>
  <label for="floatTextarea">Message</label>
</div>

6. Input Groups

html

123456789101112131415161718

<!-- Prepend text -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

<!-- Append text -->
<div class="input-group mb-3">
  <input type="number" class="form-control" placeholder="Amount" />
  <span class="input-group-text">.00</span>
  <span class="input-group-text">USD</span>
</div>

<!-- Search with button -->
<div class="input-group mb-3">
  <input type="search" class="form-control" placeholder="Search..." />
  <button class="btn btn-primary">🔍 Search</button>
</div>

7. Form Validation

html

1234567891011121314151617181920212223242526272829

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="valName" class="form-label">Full Name *</label>
    <input type="text" class="form-control" id="valName" required />
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please enter your name.</div>
  </div>

  <div class="mb-3">
    <label for="valEmail" class="form-label">Email *</label>
    <input type="email" class="form-control" id="valEmail" required />
    <div class="invalid-feedback">Please enter a valid email.</div>
  </div>

  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>
// Bootstrap validation activation
document.querySelectorAll(&#039;.needs-validation').forEach(form => {
  form.addEventListener(&#039;submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add(&#039;was-validated');
  });
});
</script>

8. Form Sizes

html

12345678

<!-- Large inputs -->
<input class="form-control form-control-lg" type="text" placeholder="Large input" />

<!-- Default -->
<input class="form-control" type="text" placeholder="Default input" />

<!-- Small -->
<input class="form-control form-control-sm" type="text" placeholder="Small input" />

9. Mini Project: Registration Form

html

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Registration</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body class="bg-light min-vh-100 d-flex align-items-center">
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="card shadow-sm border-0">
          <div class="card-body p-4 p-md-5">
            <h2 class="card-title text-center mb-4">Create Account</h2>
            <form class="needs-validation" novalidate>
              <div class="row g-3">
                <div class="col-md-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="firstName" placeholder="First Name" required />
                    <label for="firstName">First Name</label>
                    <div class="invalid-feedback">Required.</div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-floating">
                    <input type="text" class="form-control" id="lastName" placeholder="Last Name" required />
                    <label for="lastName">Last Name</label>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <input type="email" class="form-control" id="regEmail" placeholder="Email" required />
                    <label for="regEmail">Email address</label>
                    <div class="invalid-feedback">Valid email required.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-floating">
                    <input type="password" class="form-control" id="regPass" placeholder="Password" required minlength="8" />
                    <label for="regPass">Password</label>
                    <div class="invalid-feedback">Minimum 8 characters.</div>
                  </div>
                </div>
                <div class="col-12">
                  <select class="form-select" required>
                    <option value="">Select your role</option>
                    <option>Developer</option>
                    <option>Designer</option>
                    <option>Manager</option>
                  </select>
                </div>
                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="agreeTerms" required />
                    <label class="form-check-label" for="agreeTerms">
                      I agree to the <a href="#">Terms & Conditions</a>
                    </label>
                    <div class="invalid-feedback">You must agree to terms.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="d-grid">
                    <button class="btn btn-primary btn-lg" type="submit">Create Account</button>
                  </div>
                </div>
              </div>
            </form>
            <p class="text-center mt-3 text-muted">Already have an account? <a href="#">Sign In</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.querySelectorAll(&#039;.needs-validation').forEach(f => {
      f.addEventListener(&#039;submit', e => { if (!f.checkValidity()) { e.preventDefault(); e.stopPropagation(); } f.classList.add('was-validated'); });
    });
  </script>
</body>
</html>

10. Common Mistakes

Missing for/id link: The <label for="id"> must match the input id. Without this, clicking the label won't focus the input.

Forgetting novalidate on the form: Without novalidate, the browser shows native validation popups before Bootstrap's styled feedback.

11. MCQs

Question 1

What class styles a text input in Bootstrap 5?

Question 2

What class styles a `<select>` element?

Question 3

Floating labels require which wrapper?

Question 4

What class creates a toggle switch?

Question 5

Input group prepends text using?

Question 6

What class shows Bootstrap validation feedback?

Question 7

What attribute prevents browser native validation popups?

Question 8

How do you make a large form control?

Question 9

Inline checkboxes use?

Question 10

What JavaScript adds `.was-validated` class?

12. Interview Questions

Q: How does Bootstrap 5's form validation system work?

Q: What is the difference between form-control and form-select?

13. Summary

Bootstrap forms combine beautiful styling, semantic markup, and integrated validation into a complete system. Floating labels add a modern Material Design feel. Input groups extend inputs with prefixes and suffixes. The validation system with novalidate + .needs-validation + .was-validated handles all form feedback scenarios.

14. Next Chapter Recommendation

In Chapter 9: Bootstrap Tables, we style data tables with striped rows, hover effects, responsive overflow, and utility modifications for professional data display.

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

Bootstrap Forms #

1. Chapter Introduction #

2. Learning Objectives #

3. Basic Form Controls #

4. Checkboxes and Radio Buttons #

5. Floating Labels #

6. Input Groups #

7. Form Validation #

8. Form Sizes #

9. Mini Project: Registration Form #

10. Common Mistakes #

11. MCQs #

What class styles a text input in Bootstrap 5?

What class styles a <select> element?

Floating labels require which wrapper?

What class creates a toggle switch?

Input group prepends text using?

What class shows Bootstrap validation feedback?

What attribute prevents browser native validation popups?

How do you make a large form control?

Inline checkboxes use?

What JavaScript adds .was-validated class?

12. Interview Questions #

13. Summary #

14. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1

Send Feedback / Bug

Feedback Submitted!

Bootstrap Forms

1. Chapter Introduction

2. Learning Objectives

3. Basic Form Controls

4. Checkboxes and Radio Buttons

5. Floating Labels

6. Input Groups

7. Form Validation

8. Form Sizes

9. Mini Project: Registration Form

10. Common Mistakes

11. MCQs

What class styles a `<select>` element?

What JavaScript adds `.was-validated` class?

12. Interview Questions

13. Summary

14. Next Chapter Recommendation