Skip to content
Bootstrap

Forms & Validation

Build a responsive form with validation feedback.

#forms#validation

Code

bootstrap
<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>