Mastering Bootstrap: The Ultimate Guide to Building Responsive Websites Faster

Chapter 5: Bootstrap Forms & Inputs

🧠 Why This Chapter Matters

Forms are essential for capturing user input — from contact forms to sign-up pages and payment checkouts. Bootstrap provides stylized, responsive, and accessible form controls right out of the box.

In this chapter, you'll learn how to:

• Build structured forms with Bootstrap classes
• Style inputs, checkboxes, radios, and selects
• Add validation and feedback
• Use layout utilities for horizontal and grid-based forms

✅ 1. Basic Form Structure

All form elements start with the <form> tag and use Bootstrap’s form classes:

<form>

  <div class="mb-3">

    <label for="exampleEmail" class="form-label">Email address</label>

    <input type="email" class="form-control" id="exampleEmail" placeholder="name@example.com">

  </div>

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

</form>

✅ Always wrap inputs inside div.mb-3 or use grid for layout.

✅ 2. Text Inputs, Textareas, and Placeholders

<input type="text" class="form-control" placeholder="Your name">

<textarea class="form-control" rows="3" placeholder="Your message"></textarea>

✅ The placeholder attribute shows a gray hint inside the input.

✅ 3. Form Layouts

🔹 Inline Form

<form class="d-flex">

  <input class="form-control me-2" type="search" placeholder="Search">

  <button class="btn btn-outline-success" type="submit">Search</button>

</form>

🔹 Horizontal Form with Grid

<form>

  <div class="row mb-3">

    <label for="email" class="col-sm-2 col-form-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="email">

    </div>

  </div>

</form>

✅ Use .row, .col-sm-*, and .col-form-label for structured layouts.

✅ 4. Checkboxes, Radios, and Switches

🔹 Checkbox

<div class="form-check">

  <input class="form-check-input" type="checkbox" id="subscribe">

  <label class="form-check-label" for="subscribe">Subscribe to newsletter</label>

</div>

🔹 Radio

<div class="form-check">

  <input class="form-check-input" type="radio" name="plan" id="basic">

  <label class="form-check-label" for="basic">Basic Plan</label>

</div>

🔹 Switch

<div class="form-check form-switch">

  <input class="form-check-input" type="checkbox" id="toggleFeature">

  <label class="form-check-label" for="toggleFeature">Enable Feature</label>

</div>

✅ 5. Select Menus

<select class="form-select">

  <option selected>Select your country</option>

  <option value="1">USA</option>

  <option value="2">UK</option>

</select>

✅ Combine with size, multiple, or disabled attributes.

✅ 6. Input Groups (With Icons or Buttons)

<div class="input-group mb-3">

  <span class="input-group-text">@</span>

  <input type="text" class="form-control" placeholder="Username">

</div>

You can place buttons, labels, or icons before or after the input.

✅ 7. Form Validation (Client-Side)

🔹 Validating with Bootstrap

<form class="needs-validation" novalidate>

  <div class="mb-3">

    <input type="text" class="form-control" required>

    <div class="invalid-feedback">Field is required</div>

  </div>

</form>

🔹 JS to Trigger Validation

(() => {

  'use strict';

  const forms = document.querySelectorAll('.needs-validation');

  Array.from(forms).forEach(form => {

    form.addEventListener('submit', e => {

      if (!form.checkValidity()) {

        e.preventDefault();

        e.stopPropagation();

      }

      form.classList.add('was-validated');

    });

  });

})();

✅ Adds red borders and shows validation messages.

✅ 8. Disabled & Readonly Inputs

<input type="text" class="form-control" disabled value="Disabled input">

<input type="text" class="form-control" readonly value="Read-only input">

✅ 9. Floating Labels

Floating labels rise as you type into the input.

<div class="form-floating mb-3">

  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">

  <label for="floatingEmail">Email address</label>

</div>

✅ Improves UI clarity and space usage.

✅ 10. Recap Table: Form Classes