Bootstrap 5 Forms and Validation: A Practical Walkthrough

The form module is the part of Bootstrap 5 I've probably used most across three years of Laravel client work — admin panels, booking pages, contact forms, checkouts. The v5 rewrite (finally jQuery-free, floating labels, native validation) genuinely changed how much CSS I have to write per project: on a recent five-page dashboard I shipped exactly 12 lines of custom form CSS. Here are the patterns that keep showing up in my production code, straight from the .blade templates I write day to day.

The standard form layout

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input id="email" type="email" class="form-control" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
  </div>
  <button class="btn btn-primary" type="submit">Sign up</button>
</form>

Floating labels

<div class="form-floating mb-3">
  <input id="name" type="text" class="form-control" placeholder="Your name">
  <label for="name">Your name</label>
</div>

Floating labels need a placeholder attribute even if it's not visible — Bootstrap uses it to keep the label position correct.

Wiring up validation

document.querySelectorAll('.needs-validation').forEach(form => {
  form.addEventListener('submit', e => {
    if (!form.checkValidity()) {
      e.preventDefault(); e.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Input groups

<div class="input-group">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="username">
</div>

Accessibility checklist

• Every input has a <label>
• Required fields use aria-required or the required attribute
• Feedback divs have meaningful text, not just colour
• Use type="email", type="tel", etc. for mobile keyboards