Bootstrap Regulatory Frameworks & Compliance 2 — Questions and Answers
Question 1: Which Bootstrap utility class is specifically recommended to meet WCAG 2.1 minimum contrast ratio of 4.5:1 for normal text?
- text-muted
- text-body (Correct answer)
- text-secondary
- text-light
Correct answer: text-body
Bootstrap's 'text-body' uses the default body color which is designed to meet WCAG 4.5:1 contrast against the default background, whereas 'text-muted' and 'text-secondary' often fall below that threshold.
Question 2: Under the ADA (Americans with Disabilities Act), which Bootstrap component requires special ARIA role and label implementation to ensure screen reader compliance?
- Badge
- Modal dialog (Correct answer)
- Jumbotron
- Breadcrumb divider
Correct answer: Modal dialog
Modal dialogs must include role='dialog', aria-modal='true', and an accessible label (aria-labelledby or aria-label) to satisfy ADA screen reader requirements.
Question 3: Which open-source license governs Bootstrap's use, and what does it primarily require of developers integrating it in commercial projects?
- GPL v3 — share all source code
- MIT — include the copyright notice (Correct answer)
- Apache 2.0 — provide a NOTICE file
- LGPL — link dynamically only
Correct answer: MIT — include the copyright notice
Bootstrap is released under the MIT License, which requires only that the original copyright and license notice be preserved in distributions.
Question 4: When building a Bootstrap form that collects EU user data, which GDPR principle most directly affects how the submit button and consent checkbox should be implemented?
- Data minimisation
- Storage limitation
- Freely given consent (Correct answer)
- Data portability
Correct answer: Freely given consent
GDPR requires that consent be freely given, specific, informed, and unambiguous — meaning the consent checkbox must not be pre-checked and must be separate from terms acceptance.
Question 5: Section 508 of the Rehabilitation Act requires federal websites to be accessible. Which Bootstrap grid behavior can violate Section 508 if not handled correctly?
- Using container-fluid instead of container
- Reordering columns visually with order-* utilities (Correct answer)
- Applying negative margins in rows
- Nesting rows inside columns
Correct answer: Reordering columns visually with order-* utilities
Visual column reordering with Bootstrap's order-* classes creates a mismatch between DOM order (read by screen readers) and visual order, which can confuse assistive technology users and violate Section 508.
Question 6: Under CCPA, a California consumer visits a Bootstrap-powered site and clicks 'Do Not Sell My Personal Information.' Which Bootstrap component is most commonly used for this compliance link?
- Toast notification
- Fixed-bottom navbar link (Correct answer)
- Offcanvas sidebar
- Collapse panel
Correct answer: Fixed-bottom navbar link
CCPA-compliant sites commonly place the required 'Do Not Sell My Personal Information' link in a fixed-bottom navbar or footer to ensure it is persistently visible on every page.
Question 7: Which Bootstrap accessibility feature helps comply with WCAG 2.1 Success Criterion 2.4.3 (Focus Order) when using modals?
- data-bs-backdrop='static'
- Focus trap implementation inside modal (Correct answer)
- aria-hidden='true' on modal trigger
- tabindex='-1' on the modal overlay div
Correct answer: Focus trap implementation inside modal
Bootstrap modals implement a focus trap that keeps keyboard focus within the dialog while it is open, satisfying WCAG 2.4.3 which requires a logical and predictable focus order.
Bootstrap Regulatory Frameworks & Compliance 2
Which Bootstrap utility class is specifically recommended to meet WCAG 2.1 minimum contrast ratio of 4.5:1 for normal text?