Bootstrap Bootstrap 3 — Questions and Answers
Question 1: Which Bootstrap class applies a subtle background color to a table row to indicate it is in a 'success' state?
- table-active
- table-success (Correct answer)
- bg-success
- row-success
Correct answer: table-success
Contextual classes like `table-success`, `table-danger`, and `table-warning` apply theme-colored backgrounds to `<tr>`, `<td>`, or `<th>` elements.
Question 2: In Bootstrap 5, which JavaScript plugin replaces jQuery and is bundled with Bootstrap?
- Axios
- Popper.js only
- Vanilla JS with Popper.js for positioning (Correct answer)
- Prototype.js
Correct answer: Vanilla JS with Popper.js for positioning
Bootstrap 5 dropped jQuery entirely; its JavaScript is written in vanilla JS, and Popper.js is still used separately for tooltip and dropdown positioning.
Question 3: What Bootstrap utility class would you use to truncate overflowing text with an ellipsis?
- text-clip
- text-truncate (Correct answer)
- overflow-ellipsis
- text-nowrap
Correct answer: text-truncate
`text-truncate` applies `overflow: hidden`, `text-overflow: ellipsis`, and `white-space: nowrap` to truncate long text within its container.
Question 4: Which Bootstrap card sub-component places an image so it seamlessly connects with the top edge of the card?
- card-img
- card-thumbnail
- card-img-top (Correct answer)
- card-header-img
Correct answer: card-img-top
`card-img-top` rounds the top corners of an image to match the card border, creating a flush visual connection at the card's top edge.
Question 5: What does the Bootstrap class `sticky-top` do?
- Fixes the element at the top of the viewport always
- Sticks the element to the top of its scroll container once it reaches that position (Correct answer)
- Adds a top margin equal to the navbar height
- Positions the element above all other z-index layers
Correct answer: Sticks the element to the top of its scroll container once it reaches that position
`sticky-top` uses CSS `position: sticky` so the element scrolls normally until it hits the top of the viewport, then stays fixed while its parent is visible.
Question 6: In Bootstrap's spacing utilities, what does the number '3' represent in the class `mt-3`?
- 3 pixels
- 3 rem
- The third step in Bootstrap's spacing scale ($spacer * 1)
- 1rem, based on $spacer (Correct answer)
Correct answer: 1rem, based on $spacer
Bootstrap's spacing scale maps 3 to `$spacer * 1` which equals `1rem` by default, where `$spacer` is `1rem`.
Question 7: Which Bootstrap grid modifier creates a gutter-free layout with no padding between columns?
- row-tight
- g-0 (Correct answer)
- no-gutters
- p-0 on each col
Correct answer: g-0
In Bootstrap 5, `g-0` on the row removes all gutters (gaps between columns); `no-gutters` was the Bootstrap 4 equivalent that was renamed.
Bootstrap Bootstrap 3
Which Bootstrap class applies a subtle background color to a table row to indicate it is in a 'success' state?