Bootstrap Professional Standards & Competencies 3 — Questions and Answers
Question 1: Bootstrap's color system is built on CSS custom properties prefixed with `--bs-`. What is the main professional advantage of this approach?
- Styles apply only in shadow DOM
- Colors can be overridden at runtime without recompiling Sass (Correct answer)
- Custom properties are ignored by older preprocessors
- It removes the need for utility classes
Correct answer: Colors can be overridden at runtime without recompiling Sass
CSS custom properties cascade and can be redefined in any scope at runtime, allowing theming without a Sass build step.
Question 2: Which Bootstrap breakpoint is considered 'mobile-first', meaning styles defined there apply to all larger viewports unless overridden?
- sm (≥576px)
- md (≥768px)
- xs (default, <576px) (Correct answer)
- lg (≥992px)
Correct answer: xs (default, <576px)
Bootstrap's default (xs) styles apply from 0 px upward; breakpoint-suffixed classes like `col-sm-*` activate only at and above that width.
Question 3: A QA engineer notices Bootstrap tooltips are not keyboard-accessible. Which attribute must be present on the trigger element?
- role='tooltip'
- tabindex='0' (Correct answer)
- data-bs-placement
- aria-describedby
Correct answer: tabindex='0'
Non-interactive elements (like `<span>`) need `tabindex='0'` so keyboard users can focus them and trigger the tooltip.
Question 4: Which Bootstrap container class creates a full-width container that becomes fixed-width at the `lg` breakpoint?
- container
- container-fluid
- container-lg (Correct answer)
- container-xl
Correct answer: container-lg
`container-lg` is fluid below the `lg` breakpoint and becomes max-width constrained at `lg` and above.
Question 5: When building a Bootstrap form, using `<fieldset>` with `<legend>` is recommended primarily for which reason?
- It enables Bootstrap's floating label feature
- It groups related controls semantically for screen readers (Correct answer)
- It applies automatic grid column sizing
- It activates Bootstrap's built-in form validation
Correct answer: It groups related controls semantically for screen readers
A `<fieldset>` with `<legend>` communicates the relationship between grouped controls to assistive technologies.
Question 6: A developer wants to reduce Bootstrap's production CSS bundle. Which approach is most effective?
- Load Bootstrap from multiple CDNs simultaneously
- Use PurgeCSS/PurgeHTML with the npm Sass build to remove unused classes (Correct answer)
- Inline all Bootstrap CSS in a `<style>` tag
- Duplicate Bootstrap files per page
Correct answer: Use PurgeCSS/PurgeHTML with the npm Sass build to remove unused classes
PurgeCSS scans HTML/JS for class names actually used and removes all others from the compiled Bootstrap CSS, drastically shrinking the bundle.
Question 7: Which Bootstrap JS plugin method is used to programmatically show a modal named `myModal`?
- bootstrap.Modal.open('#myModal')
- new bootstrap.Modal('#myModal').show() (Correct answer)
- document.querySelector('#myModal').toggle()
- Modal.launch('myModal')
Correct answer: new bootstrap.Modal('#myModal').show()
You instantiate `bootstrap.Modal` with the element reference, then call `.show()` to display the modal via the JavaScript API.
Bootstrap Professional Standards & Competencies 3
Bootstrap's color system is built on CSS custom properties prefixed with `--bs-`.
What is the main professional advantage of this approach?