Bootstrap Bootstrap 4 — Questions and Answers
Question 1: What Bootstrap component would you use to display step-by-step progress through a multi-step form?
- progress
- stepper
- breadcrumb (Correct answer)
- pagination
Correct answer: breadcrumb
While not a 'stepper', Bootstrap's `breadcrumb` is commonly used to indicate progress through multi-step processes; `progress` bars show completion percentage.
Question 2: Which Bootstrap class creates a responsive image that scales down to fit its container but never scales up beyond its natural size?
- img-responsive
- img-fluid (Correct answer)
- img-scalable
- img-fit
Correct answer: img-fluid
`img-fluid` applies `max-width: 100%` and `height: auto` so images shrink within their container but never enlarge beyond their natural dimensions.
Question 3: What is the effect of adding `data-bs-toggle='collapse'` to a button in Bootstrap?
- Toggles a dropdown menu
- Shows or hides a targeted collapsible element without writing JavaScript (Correct answer)
- Adds a collapse animation to a modal
- Enables accordion behavior on a list group
Correct answer: Shows or hides a targeted collapsible element without writing JavaScript
The `data-bs-toggle='collapse'` attribute initializes Bootstrap's Collapse plugin on the button, toggling the visibility of the element referenced by `data-bs-target`.
Question 4: In Bootstrap, which breakpoint class prefix targets screens 768px wide and above?
- sm
- md (Correct answer)
- lg
- xl
Correct answer: md
The `md` breakpoint targets viewports ≥768px, making `col-md-*` classes active at medium and larger screen sizes.
Question 5: What Bootstrap class would you add to a `<form>` element to display form controls side-by-side in a horizontal row?
- form-inline
- row g-3 align-items-center (Correct answer)
- form-horizontal
- d-flex form
Correct answer: row g-3 align-items-center
In Bootstrap 5, `form-inline` was removed; the recommended approach is using `row g-3 align-items-center` with grid columns to create inline/horizontal forms.
Question 6: Which Bootstrap class applies a darkened overlay style to a navbar, giving it a dark background with light-colored links?
- navbar-dark (Correct answer)
- navbar-inverse
- navbar-black
- bg-dark only
Correct answer: navbar-dark
`navbar-dark` sets the text and icon colors to light variants, and should be paired with a dark background utility like `bg-dark` or `bg-primary`.
Question 7: What does Bootstrap's `visually-hidden` class (formerly `sr-only`) do?
- Hides the element completely including from screen readers
- Visually hides the element but keeps it accessible to screen readers (Correct answer)
- Adds a tooltip visible only to mobile users
- Reduces element opacity to 0
Correct answer: Visually hides the element but keeps it accessible to screen readers
`visually-hidden` uses clip and positioning techniques to hide content from sighted users while keeping it fully accessible to assistive technologies like screen readers.
Bootstrap Bootstrap 4
What Bootstrap component would you use to display step-by-step progress through a multi-step form?