Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I customize Bootstrap's default form validation feedback styles?
Asked on Apr 24, 2026
Answer
To customize Bootstrap's default form validation feedback styles, you can override the default CSS classes with your own styles. Here's a simple example of how you can change the appearance of the validation feedback messages.
<!-- BEGIN COPY / PASTE -->
<style>
.custom-valid-feedback {
color: #28a745; /* Custom green color */
font-weight: bold;
}
.custom-invalid-feedback {
color: #dc3545; /* Custom red color */
font-weight: bold;
}
</style>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="custom-valid-feedback">
Looks good!
</div>
<div class="custom-invalid-feedback">
Please provide a valid first name.
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- This example uses custom classes `custom-valid-feedback` and `custom-invalid-feedback` to override Bootstrap's default feedback styles.
- The `novalidate` attribute is used to disable the browser's default validation, allowing Bootstrap's validation to take effect.
- Ensure that the form has the `needs-validation` class to enable Bootstrap's validation styles.
- You can further customize the styles by adding more CSS properties to the custom classes.
Recommended Links:
