Bootstrap Case Studies & Practical Application 5 — Questions and Answers
Question 1: A developer uses Bootstrap's offcanvas component for a mobile drawer menu. Which attribute on the trigger button opens the offcanvas?
- data-bs-toggle="offcanvas" and data-bs-target pointing to the offcanvas ID (Correct answer)
- data-bs-open="offcanvas" and data-bs-id pointing to the offcanvas ID
- data-bs-trigger="drawer" and data-bs-ref pointing to the offcanvas ID
- data-bs-show="offcanvas" and data-bs-target pointing to the offcanvas ID
Correct answer: data-bs-toggle="offcanvas" and data-bs-target pointing to the offcanvas ID
data-bs-toggle="offcanvas" on the trigger button, combined with data-bs-target referencing the offcanvas element's ID, wires up the open behavior.
Question 2: A multi-step form wizard uses Bootstrap's progress bar. Which class and attribute set the filled portion to 60%?
- progress-bar class with style="width: 60%" and aria-valuenow="60" (Correct answer)
- progress class with data-bs-value="60" on the outer div
- progress-fill class with width-60 utility on the inner div
- progress-bar class with data-bs-progress="60" on the inner div
Correct answer: progress-bar class with style="width: 60%" and aria-valuenow="60"
The inner progress-bar div uses an inline width style for visual fill and aria-valuenow for accessibility, within an outer div with the progress class.
Question 3: A Bootstrap card deck should display 2 cards per row on small screens and 4 per row on extra-large screens. Which column classes on each card achieve this?
- col-sm-6 col-xl-3 (Correct answer)
- col-6 col-4
- col-sm-2 col-xl-4
- col-small-6 col-xlarge-3
Correct answer: col-sm-6 col-xl-3
col-sm-6 gives 2 cards per row (6+6=12) from sm up, and col-xl-3 overrides to 4 per row (3×4=12) from xl up.
Question 4: A developer wants to hide an element visually but keep it accessible to screen readers. Which Bootstrap utility achieves this?
- visually-hidden (Correct answer)
- d-none
- invisible
- opacity-0
Correct answer: visually-hidden
visually-hidden (formerly sr-only in Bootstrap 4) hides elements visually while keeping them in the accessibility tree for screen readers.
Question 5: A Bootstrap dropdown inside a table cell clips at the table boundary. What CSS property on the table element resolves this?
- overflow: visible on the table or its parent (Correct answer)
- position: relative on the table element
- z-index: auto on the dropdown menu
- display: block on the table element
Correct answer: overflow: visible on the table or its parent
Tables default to overflow: hidden in some contexts, and setting overflow: visible on the table or its container allows the dropdown to render outside the table bounds.
Question 6: A team uses Bootstrap utilities to implement a dark-mode-aware theme in Bootstrap 5.3+. Which HTML attribute enables the built-in color mode system?
- data-bs-theme="dark" on the html or a parent element (Correct answer)
- class="theme-dark" on the body element
- data-color-scheme="dark" on the html element
- data-bs-mode="dark" on the body element
Correct answer: data-bs-theme="dark" on the html or a parent element
Bootstrap 5.3 introduced a color mode system activated by data-bs-theme on any element, switching all Bootstrap components to dark or light mode.
Question 7: A developer uses Bootstrap's grid with gutters and notices large gaps between columns. Which class pair on the row controls horizontal and vertical gutters respectively?
- gx-* for horizontal gutters and gy-* for vertical gutters (Correct answer)
- gap-x-* for horizontal and gap-y-* for vertical gutters
- px-* for horizontal and py-* for vertical gutters on the row
- col-gap-* and row-gap-* on the row element
Correct answer: gx-* for horizontal gutters and gy-* for vertical gutters
Bootstrap 5 uses gx-* to control horizontal (column) gutters and gy-* to control vertical (row) gutters, or g-* for both at once.
Bootstrap Case Studies & Practical Application 5
A developer uses Bootstrap's offcanvas component for a mobile drawer menu.
Which attribute on the trigger button opens the offcanvas?