Bootstrap Form Controls & Validation
Bootstrap provides visual feedback styles for form validation, showing green for valid fields and red for invalid ones, along with helper text explaining what went wrong.
Validation styles are applied using the .is-valid and .is-invalid classes (often added via JavaScript), paired with .valid-feedback and .invalid-feedback text blocks.
<input class="form-control is-invalid">
<div class="invalid-feedback">Error message</div>Validation classes
Add .is-valid or .is-invalid to a .form-control to show a green or red border and icon. Pair each with a .valid-feedback or .invalid-feedback div containing a helpful message.
Native browser validation
Adding the novalidate attribute to a <form> combined with Bootstrap's JS lets you use custom styling with the browser's built-in required/pattern validation instead of default browser popups.
<div class="mb-3">
<label class="form-label">Username</label>
<input type="text" class="form-control is-invalid" value="ab">
<div class="invalid-feedback">Username must be at least 3 characters.</div>
</div>A red-bordered input field with an error message shown below itis-invalid highlights the field in red, and invalid-feedback displays the specific error message.
<form class="needs-validation" novalidate>
<input type="text" class="form-control" required>
<div class="invalid-feedback">This field is required.</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
document.querySelector('.needs-validation').addEventListener('submit', function (e) {
if (!this.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
this.classList.add('was-validated');
});
</script>Submitting an empty required field shows a red border and the custom error text instead of the default browser popupThe was-validated class, added after submit, tells Bootstrap to display its custom valid/invalid styles based on the native HTML validation state.
Key points
- .is-valid and .is-invalid show green/red validation styling.
- .valid-feedback and .invalid-feedback display helper messages.
- novalidate combined with JavaScript enables custom Bootstrap validation styling.
- The was-validated class on a form triggers Bootstrap's validation styles.