Bootstrap Technology & Digital Applications 4 — Questions and Answers
Question 1: In Bootstrap 5, what replaced jQuery as the JavaScript dependency?
- React
- Alpine.js
- Vanilla JavaScript (no dependency) (Correct answer)
- Vue.js
Correct answer: Vanilla JavaScript (no dependency)
Bootstrap 5 dropped the jQuery dependency entirely, rewriting all plugins in plain vanilla JavaScript.
Question 2: Which Bootstrap class pair enables a responsive table that scrolls horizontally on small screens?
- table-responsive on a wrapper div and table on the table element (Correct answer)
- table-scroll on both the wrapper and table
- overflow-x on the table element directly
- table-fluid wrapping table-bordered
Correct answer: table-responsive on a wrapper div and table on the table element
Wrapping a `<table class='table'>` inside a `<div class='table-responsive'>` enables horizontal scrolling on overflow.
Question 3: What Bootstrap class would you add to a `<button>` to style it as a large primary button?
- btn btn-primary btn-lg (Correct answer)
- button-primary large
- bs-btn primary xl
- btn-xl btn-primary-large
Correct answer: btn btn-primary btn-lg
Bootstrap buttons use modifier classes: `btn` as the base, `btn-{variant}` for color, and `btn-{size}` for size.
Question 4: Which Bootstrap utility class makes an image scale proportionally to never exceed its parent container's width?
- img-fluid (Correct answer)
- img-responsive
- w-auto
- img-scale
Correct answer: img-fluid
`img-fluid` applies `max-width: 100%` and `height: auto` so images shrink to fit without distorting.
Question 5: In Bootstrap's color system, which contextual class indicates a warning state (typically yellow)?
- danger
- caution
- warning (Correct answer)
- alert
Correct answer: warning
Bootstrap uses `warning` as the contextual color class for yellow/amber states, applied as `btn-warning`, `text-warning`, `bg-warning`, etc.
Question 6: What does the Bootstrap `align-items-center` class do within a flex container?
- Centers the flex container itself on the page
- Aligns flex items along the cross axis to the center (Correct answer)
- Centers text within each flex item
- Sets equal spacing between all flex items
Correct answer: Aligns flex items along the cross axis to the center
`align-items-center` sets `align-items: center` on a flex container, vertically centering items along the cross axis in a row layout.
Question 7: Which Bootstrap component displays a small dismissible notification that appears temporarily at a corner of the screen?
- Alert
- Popover
- Toast (Correct answer)
- Tooltip
Correct answer: Toast
Bootstrap Toasts are lightweight, dismissible notifications designed for push-style messages displayed in a corner of the viewport.
Bootstrap Technology & Digital Applications 4
In Bootstrap 5, what replaced jQuery as the JavaScript dependency?