Bootstrap Professional Standards & Competencies 5

Question 1

Bootstrap's `.visually-hidden` class differs from `display: none` in which critical accessibility way?

Accepted Answer

Content remains in the accessibility tree and is read by screen readers

Answer

`.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?

Accepted Answer

Before `@import 'bootstrap'` using `map-merge`

Answer

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?

Accepted Answer

col

Answer

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?

Accepted Answer

Breadcrumb

Answer

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?

Accepted Answer

click event bubbling to `document`

Answer

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.

Bootstrap Practice Test

Bootstrap Practice Test

Bootstrap Professional Standards & Competencies 5