Bootstrap Regulatory Frameworks & Compliance 5 — Questions and Answers
Question 1: Which Bootstrap Sass variable override is relevant when customizing colors to ensure WCAG AA compliance throughout a white-label product?
- $font-size-base
- $min-contrast-ratio (Correct answer)
- $grid-gutter-width
- $border-radius
Correct answer: $min-contrast-ratio
Bootstrap 5 exposes $min-contrast-ratio (default 4.5) which its color-contrast() function uses to auto-select accessible text colors, making it a key variable for brand compliance customization.
Question 2: Under COPPA (Children's Online Privacy Protection Act), which Bootstrap UI element must be carefully reviewed when collecting age data on a US site with users who may be under 13?
- Bootstrap's progress bar
- Bootstrap's date input styled with form-control (Correct answer)
- Bootstrap's card deck layout
- Bootstrap's list group for displaying content
Correct answer: Bootstrap's date input styled with form-control
COPPA compliance requires verifiable parental consent before collecting data from under-13 users; age/date-of-birth inputs styled with Bootstrap's form-control must feed age-gating logic before any data collection begins.
Question 3: A Bootstrap site undergoes a SOC 2 Type II audit. Which Bootstrap-related practice would an auditor flag as a control gap in the Availability principle?
- Using Bootstrap Icons instead of Font Awesome
- Loading Bootstrap from a single CDN with no fallback (Correct answer)
- Customizing Bootstrap's grid breakpoints
- Using Bootstrap's utility-API to generate custom classes
Correct answer: Loading Bootstrap from a single CDN with no fallback
SOC 2 Availability requires redundancy; relying on a single CDN for Bootstrap assets without a local fallback creates a single point of failure that auditors flag as a control gap.
Question 4: Which Bootstrap 5 form validation approach aligns best with WCAG 2.1 SC 3.3.1 (Error Identification), requiring errors to be described in text?
- Relying solely on red border color via is-invalid class
- Using is-invalid with a visible .invalid-feedback text block (Correct answer)
- Using CSS :invalid pseudo-class without any helper text
- Applying a Bootstrap tooltip to show error messages on hover
Correct answer: Using is-invalid with a visible .invalid-feedback text block
WCAG 3.3.1 requires errors to be identified in text, not just color; Bootstrap's is-invalid class paired with a .invalid-feedback <div> provides both visual and programmatically associated text error descriptions.
Question 5: According to the MIT License under which Bootstrap is distributed, which action would constitute a license violation?
- Using Bootstrap in a proprietary commercial SaaS application
- Removing the Bootstrap copyright notice from a compiled and distributed CSS file (Correct answer)
- Modifying Bootstrap's source Sass files for a client project
- Loading Bootstrap from jsDelivr CDN without attribution on the webpage
Correct answer: Removing the Bootstrap copyright notice from a compiled and distributed CSS file
The MIT License requires that the copyright notice and license text be included in all copies or substantial portions of the software; stripping it from distributed compiled files violates the license.
Question 6: Which Bootstrap plugin behavior must be overridden to comply with WCAG 2.1 SC 2.1.2 (No Keyboard Trap) if the modal's close button is removed?
- The backdrop click handler
- The Escape key dismiss handler (Correct answer)
- The scrollbar compensation logic
- The focus trap within the modal
Correct answer: The Escape key dismiss handler
WCAG 2.1.2 requires that users can move focus away from any component using standard keys; if the close button is absent, the Escape key handler must remain intact so keyboard users can exit the modal.
Question 7: For a Bootstrap site to comply with the EU's ePrivacy Directive regarding cookies set by Bootstrap's JavaScript (e.g., for carousels or modals storing state), what is required?
- No action needed — functional cookies are always exempt
- Disclose and obtain consent for any non-essential cookies before Bootstrap JS sets them (Correct answer)
- Only disclose cookies in the privacy policy without requiring consent
- Set all Bootstrap-related cookies with SameSite=Strict automatically
Correct answer: Disclose and obtain consent for any non-essential cookies before Bootstrap JS sets them
The ePrivacy Directive requires informed prior consent for non-essential cookies; if Bootstrap JS stores state cookies beyond strictly necessary functionality, they must be disclosed and consented to before being set.
Bootstrap Regulatory Frameworks & Compliance 5
Which Bootstrap Sass variable override is relevant when customizing colors to ensure WCAG AA compliance throughout a white-label product?