Bootstrap Professional Standards & Competencies 4 — Questions and Answers
Question 1: Which Bootstrap spacing utility correctly applies `margin-top: 1rem` on medium and larger screens only?
- mt-md-3 (Correct answer)
- m-md-top-3
- margin-top-md-3
- mt-3-md
Correct answer: mt-md-3
Bootstrap responsive spacing utilities follow the pattern `{property}{sides}-{breakpoint}-{size}`, making `mt-md-3` the correct form for responsive margin-top.
Question 2: A Bootstrap navbar collapses on mobile. Which class on the `<button>` ensures screen readers announce its purpose?
- class='sr-only'
- aria-label='Toggle navigation' (Correct answer)
- role='menu'
- data-bs-dismiss='navbar'
Correct answer: aria-label='Toggle navigation'
`aria-label='Toggle navigation'` gives the hamburger button a descriptive label for assistive technology since it contains only an icon.
Question 3: Bootstrap's `row-cols-*` classes are used to control which layout aspect?
- Number of columns a single item spans
- Number of equal-width columns per row (Correct answer)
- Column offset alignment
- Vertical gutter spacing between rows
Correct answer: Number of equal-width columns per row
`row-cols-N` sets all direct column children to `1/N` width, providing a shorthand for equal-width multi-column layouts.
Question 4: Which Bootstrap 5 approach replaces the deprecated `data-toggle` attribute from Bootstrap 4?
- data-toggle remains unchanged in v5
- data-bs-toggle (Correct answer)
- bs-data-toggle
- v5-toggle
Correct answer: data-bs-toggle
Bootstrap 5 added the `bs-` namespace prefix to all data attributes (e.g., `data-bs-toggle`) to avoid conflicts with other libraries.
Question 5: A professional deploys a Bootstrap site and notices horizontal scrollbar on mobile. The most common cause is which issue?
- Using `container-fluid` instead of `container`
- An element wider than the viewport, often a row without a parent container (Correct answer)
- Too many breakpoint classes on one element
- Missing `meta charset` tag
Correct answer: An element wider than the viewport, often a row without a parent container
Negative row margins expand beyond the viewport if the row isn't inside a Bootstrap container that compensates with matching padding.
Question 6: Which Bootstrap utility class applies `display: none` only on print media?
- d-print-none (Correct answer)
- d-none-print
- print-hidden
- d-screen-only
Correct answer: d-print-none
`d-print-none` hides an element when the page is printed using Bootstrap's print-specific display utilities.
Question 7: What is the professional reason to avoid placing Bootstrap JavaScript `<script>` tags in the `<head>` without the `defer` attribute?
- Bootstrap JS does not load from `<head>` at all
- Parsing blocks before DOM is ready, causing plugin initialization errors (Correct answer)
- It duplicates Bootstrap's CSS loading
- The bundle size doubles when placed in `<head>`
Correct answer: Parsing blocks before DOM is ready, causing plugin initialization errors
Without `defer`, scripts in `<head>` block HTML parsing, and Bootstrap plugins may try to query DOM elements that don't yet exist.
Bootstrap Professional Standards & Competencies 4
Which Bootstrap spacing utility correctly applies `margin-top: 1rem` on medium and larger screens only?