Bootstrap Professional Standards & Competencies 5 — Questions and Answers
Question 1: Bootstrap's `.visually-hidden` class differs from `display: none` in which critical accessibility way?
- It hides content from all users equally
- Content remains in the accessibility tree and is read by screen readers (Correct answer)
- It removes the element from the DOM
- It applies only on mobile viewports
Correct answer: Content remains in the accessibility tree and is read by screen readers
`.visually-hidden` uses clip and size tricks to hide content visually while keeping it announced by screen readers, unlike `display:none` which removes it from the accessibility tree.
Question 2: A team uses Bootstrap's Sass map `$theme-colors` to add a custom color. Where must the map be defined relative to Bootstrap's import?
- After `@import 'bootstrap'`
- Inside Bootstrap's `_variables.scss` directly
- Before `@import 'bootstrap'` using `map-merge` (Correct answer)
- In a separate CSS file after the compiled Bootstrap CSS
Correct answer: Before `@import 'bootstrap'` using `map-merge`
You must define or merge into `$theme-colors` before importing Bootstrap so the `!default` declaration is overridden and utilities regenerate with your custom color.
Question 3: Which Bootstrap grid feature allows a column to automatically fill remaining horizontal space without specifying a column number?
- col-auto
- col (Correct answer)
- col-fill
- col-flex
Correct answer: col
A plain `col` class creates an equal-width column that flexes to fill available space alongside sibling columns.
Question 4: Which Bootstrap component should be used to provide step-by-step progress indicators in a multi-step form?
- Progress bar
- Pagination
- Breadcrumb (Correct answer)
- Stepper via list-group with active states
Correct answer: Breadcrumb
Breadcrumbs visually indicate location within a multi-step process and are the semantically appropriate Bootstrap component for form step navigation.
Question 5: A Bootstrap dropdown menu does not close when clicking outside. Which JavaScript event listener behavior is Bootstrap relying on to handle outside clicks?
- click on the dropdown toggle only
- focusout on the menu items
- click event bubbling to `document` (Correct answer)
- mousedown on the body element
Correct answer: click event bubbling to `document`
Bootstrap attaches a click listener to `document` that detects clicks outside the dropdown by checking if the target is within the component, leveraging event bubbling.
Question 6: When using Bootstrap's responsive images (`img-fluid`), what CSS properties are applied?
- width: 100%; height: auto
- max-width: 100%; height: auto (Correct answer)
- width: auto; max-height: 100%
- display: block; width: fit-content
Correct answer: max-width: 100%; height: auto
`img-fluid` applies `max-width: 100%` and `height: auto` so the image scales down within its container but never scales above its natural size.
Question 7: Which practice violates Bootstrap's professional standards when building accessible modals?
- Setting `aria-labelledby` pointing to the modal title
- Adding `tabindex='-1'` to the modal element
- Allowing focus to move freely outside the modal while it is open (Correct answer)
- Using a visible close button with `aria-label='Close'`
Correct answer: Allowing focus to move freely outside the modal while it is open
WCAG and Bootstrap guidelines require focus to be trapped inside an open modal so keyboard users cannot interact with background content.
Bootstrap Professional Standards & Competencies 5
Bootstrap's `.visually-hidden` class differs from `display: none` in which critical accessibility way?