Bootstrap Quality Control & Assurance 2

Question 1

Which Bootstrap utility class validates that a form input passes HTML5 constraint validation?

Accepted Answer

.is-valid

Answer

.is-valid applies green styling to indicate a field has passed validation.

Question 2

What does adding the .was-validated class to a <form> element accomplish?

Accepted Answer

Applies Bootstrap's valid/invalid styles to all child inputs based on their validity state

Answer

.was-validated on the form causes Bootstrap to display valid/invalid feedback for every input that has been touched.

Question 3

In Bootstrap's validation system, which element displays an error message beneath an invalid input?

Accepted Answer

.invalid-feedback

Answer

.invalid-feedback is shown automatically when a sibling input has the .is-invalid class or fails constraint validation inside .was-validated.

Question 4

A tester finds that Bootstrap's .is-valid style is not appearing on a custom checkbox. What is the most likely cause?

Accepted Answer

The checkbox must be inside a .form-check wrapper and use .form-check-input

Answer

Bootstrap's validation styles for checkboxes rely on the .form-check / .form-check-input structure to apply correctly.

Question 5

Which Bootstrap class should be added to display a tooltip-style validation message instead of a block-level one?

Accepted Answer

.valid-tooltip

Answer

.valid-tooltip renders the success message as an absolutely positioned tooltip overlay rather than a block element.

Bootstrap Practice Test