Bootstrap Case Studies & Practical Application 5

Question 1

A developer uses Bootstrap's offcanvas component for a mobile drawer menu. Which attribute on the trigger button opens the offcanvas?

Accepted Answer

data-bs-toggle="offcanvas" and data-bs-target pointing to the offcanvas ID

Answer

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%?

Accepted Answer

progress-bar class with style="width: 60%" and aria-valuenow="60"

Answer

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?

Accepted Answer

col-sm-6 col-xl-3

Answer

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?

Accepted Answer

visually-hidden

Answer

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?

Accepted Answer

overflow: visible on the table or its parent

Answer

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.

Bootstrap Practice Test

Bootstrap Practice Test

Bootstrap Case Studies & Practical Application 5