Forms & Validation

Code

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
  </div>

  <div class="col-md-6">
    <label class="form-label">Select</label>
    <select class="form-select">
      <option selected>Choose...</option>
      <option value="1">One</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="agree">
      <label class="form-check-label" for="agree">Agree to terms</label>
    </div>
  </div>

  <div class="col-12">
    <button class="btn btn-success" type="submit">Submit</button>
  </div>
</form>

Explanation

Bootstrap forms use form-control, form-select, and form-check classes for consistent styling. The needs-validation class hooks into browser validation, with invalid-feedback messages shown when :invalid. Grid utilities (col-md-6) arrange fields responsively.

More Bootstrap Snippets