Bootstrap Quality Control & Assurance 5 — Questions and Answers
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?
- Bootstrap 5 custom properties require Sass compilation at runtime
- The browser does not support CSS custom properties (--variable syntax) (Correct answer)
- Bootstrap custom properties need a polyfill JS file
- The :root selector is overriding the custom properties
Correct answer: The browser does not support CSS custom properties (--variable syntax)
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?
- $grid-columns (Correct answer)
- $grid-gutter-width
- $grid-breakpoints
- $column-count
Correct answer: $grid-columns
$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?
- Minify the full Bootstrap CSS file
- Import only the required Bootstrap Sass partials instead of the full bundle (Correct answer)
- Use the Bootstrap CDN with defer attribute
- Enable Bootstrap's tree-shaking plugin
Correct answer: Import only the required Bootstrap Sass partials instead of the full bundle
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?
- Rename Bootstrap's $ to jQuery.noConflict()
- Use Bootstrap's native ESM modules which do not rely on jQuery (Correct answer)
- Add data-bs-no-conflict='true' to the script tag
- Load Bootstrap JS before any other library
Correct answer: Use Bootstrap's native ESM modules which do not rely on jQuery
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:
- The spinner requires JavaScript to animate
- CSS animations are disabled or reduced in the headless browser configuration (Correct answer)
- The .spinner-border class is missing a required parent
- Bootstrap spinners use SVG which headless browsers do not render
Correct answer: CSS animations are disabled or reduced in the headless browser configuration
Headless browsers often disable CSS animations by default for performance, causing animation-dependent components like spinners to appear static.
Question 6: A content security policy (CSP) blocks Bootstrap's inline styles injected by Popper.js tooltips. Which CSP directive must be adjusted?
- script-src
- style-src (Correct answer)
- font-src
- connect-src
Correct answer: style-src
Popper.js applies positioning as inline styles, which requires 'unsafe-inline' or a nonce/hash in the style-src CSP directive.
Question 7: During QA, a Bootstrap card deck shows unequal heights across cards in the same row. Which utility class enforces equal heights via flexbox?
- .card-equal-height
- .h-100 on each card (Correct answer)
- .card-deck-equal
- .flex-fill on each card
Correct answer: .h-100 on each card
Adding .h-100 to each .card inside a flex row container forces all cards to stretch to the tallest item's height.
Bootstrap Quality Control & Assurance 5
A QA team discovers that Bootstrap's CSS variables (custom properties) are not applied in a legacy environment.
What is the root cause?