Bootstrap Quality Control & Assurance 5

Question 1

A QA team discovers that Bootstrap's CSS variables (custom properties) are not applied in a legacy environment. What is the root cause?

Accepted Answer

The browser does not support CSS custom properties (--variable syntax)

Answer

Bootstrap 5 relies heavily on CSS custom properties, which are not supported in older browsers like IE11.

Question 2

Which Bootstrap Sass variable controls the number of grid columns (default 12) when customizing a build?

Accepted Answer

$grid-columns

Answer

$grid-columns sets the total number of columns in the Bootstrap grid system and defaults to 12.

Question 3

During a performance QA review, only Bootstrap's grid and utilities are needed. What is the recommended approach to reduce bundle size?

Accepted Answer

Import only the required Bootstrap Sass partials instead of the full bundle

Answer

Importing individual Bootstrap Sass partials (e.g., grid, utilities) excludes unused components and reduces final CSS size.

Question 4

A QA check reveals that Bootstrap's JavaScript plugins conflict with another library using the $ shorthand. What is Bootstrap's recommended solution?

Accepted Answer

Use Bootstrap's native ESM modules which do not rely on jQuery

Answer

Bootstrap 5 dropped jQuery entirely, so using Bootstrap's native ESM JavaScript eliminates $ conflicts by design.

Question 5

When running visual regression tests on Bootstrap components, a spinner's animation fails to render in a headless browser screenshot. The most likely cause is:

Accepted Answer

CSS animations are disabled or reduced in the headless browser configuration

Answer

Headless browsers often disable CSS animations by default for performance, causing animation-dependent components like spinners to appear static.

Bootstrap Practice Test

Bootstrap Practice Test

Bootstrap Quality Control & Assurance 5