Validation states

To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.

<div class="mb-3">
  <label class="form-label">Validation States </label>
  <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..." />
  <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
  <div class="invalid-feedback">Invalid feedback</div>
</div>

Subtle validation states

If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.

<div class="mb-3">
  <label class="form-label">Validation States (lite)</label>
  <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..." />
  <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
</div>