Bootstrap Quality Control & Assurance 4 — Questions and Answers
Question 1: A responsive layout QA test fails on tablets but passes on mobile and desktop. Which Bootstrap breakpoint range covers tablets by default?
- sm (≥576px) to md (≥768px)
- md (≥768px) to lg (≥992px) (Correct answer)
- xs (<576px) to sm (≥576px)
- lg (≥992px) to xl (≥1200px)
Correct answer: md (≥768px) to lg (≥992px)
Tablets typically fall in the md (768px) to lg (992px) Bootstrap breakpoint range.
Question 2: Which Bootstrap grid utility hides an element only on medium screens (md) while keeping it visible on all other sizes?
- .d-md-none (Correct answer)
- .hide-md
- .d-none .d-md-block
- .invisible-md
Correct answer: .d-md-none
.d-md-none sets display:none starting at the md breakpoint without affecting other breakpoints when combined with .d-block.
Question 3: During cross-browser QA, Bootstrap's flex utilities render incorrectly in an older browser. Which CSS feature do Bootstrap's .d-flex and .flex-* classes depend on?
- CSS Grid
- CSS Flexbox (Correct answer)
- CSS Multi-column
- CSS Float
Correct answer: CSS Flexbox
Bootstrap's .d-flex and all .flex-* utilities are built on the CSS Flexbox specification.
Question 4: A QA engineer checks that columns stack vertically on mobile. Which Bootstrap column class produces a full-width column only on extra-small screens?
- .col-xs-12
- .col-12 (Correct answer)
- .col-sm-12
- .col-full
Correct answer: .col-12
.col-12 spans all 12 grid columns at every breakpoint including xs (extra-small), making it full-width on mobile.
Question 5: When auditing Bootstrap's container widths, which container type spans the full viewport width at every breakpoint?
- .container
- .container-fluid (Correct answer)
- .container-xl
- .container-full
Correct answer: .container-fluid
.container-fluid is always 100% wide regardless of viewport size, unlike .container which has max-width breakpoints.
Question 6: A tester verifies Bootstrap spacing utilities. What does the class .mt-auto do in a flex container?
- Sets margin-top to the theme's default spacer
- Pushes the element to the bottom by auto-filling the top margin (Correct answer)
- Removes all top margin
- Sets margin-top to 100%
Correct answer: Pushes the element to the bottom by auto-filling the top margin
In a flex column, .mt-auto sets margin-top: auto, which absorbs available space and pushes the element to the bottom.
Question 7: During accessibility QA, a screen reader announces a Bootstrap button as 'button' but does not read its purpose. Which fix is most appropriate?
- Add aria-label='descriptive text' to the button (Correct answer)
- Add role='link' to the button
- Wrap the button in a .visually-hidden span
- Add data-bs-label to the button
Correct answer: Add aria-label='descriptive text' to the button
aria-label provides an accessible name for the button that screen readers announce when the visible text is absent or unclear.
Bootstrap Quality Control & Assurance 4
A responsive layout QA test fails on tablets but passes on mobile and desktop.
Which Bootstrap breakpoint range covers tablets by default?