Bootstrap Technology & Digital Applications 5 — Questions and Answers
Question 1: How do you customize Bootstrap's default theme colors using Sass?
- Override variables in a custom .scss file before importing Bootstrap's source (Correct answer)
- Edit the Bootstrap CDN URL parameters
- Use the `data-bs-theme` attribute in HTML
- Call `Bootstrap.setTheme()` in JavaScript
Correct answer: Override variables in a custom .scss file before importing Bootstrap's source
Bootstrap Sass variables use `!default`, so setting your own values before `@import 'bootstrap'` overrides the defaults.
Question 2: Which Bootstrap class enables dark mode styling introduced in Bootstrap 5.3?
- theme-dark
- bs-dark-mode
- data-bs-theme='dark' (Correct answer)
- dark-mode
Correct answer: data-bs-theme='dark'
Bootstrap 5.3 added a built-in color mode system where `data-bs-theme='dark'` on the `<html>` tag activates dark mode CSS variables.
Question 3: In Bootstrap's accordion component, what class on the parent wrapper ensures only one panel stays open at a time?
- accordion-single
- accordion-flush
- No additional class — use `data-bs-parent` on each button pointing to the parent ID (Correct answer)
- accordion-exclusive
Correct answer: No additional class — use `data-bs-parent` on each button pointing to the parent ID
Setting `data-bs-parent='#accordionId'` on each collapse trigger tells Bootstrap to close sibling panels when one opens.
Question 4: What Bootstrap class removes the default list styling (bullets and padding) from a `<ul>` element?
- list-plain
- list-unstyled (Correct answer)
- list-reset
- ul-clean
Correct answer: list-unstyled
`list-unstyled` removes `list-style`, `margin`, and `padding-left` from `<ul>` and `<ol>` elements.
Question 5: Which Bootstrap class on a `<nav>` element creates a breadcrumb navigation component?
- nav-breadcrumb
- breadcrumb (Correct answer)
- nav-path
- breadcrumb-nav
Correct answer: breadcrumb
The `breadcrumb` class on an `<ol>` inside a `<nav>` creates Bootstrap's breadcrumb trail with auto-generated separators via CSS.
Question 6: What is the effect of adding the `shadow` utility class to a Bootstrap card?
- Applies a drop shadow using CSS box-shadow (Correct answer)
- Adds a dark overlay background to the card
- Makes the card semi-transparent
- Blurs the card's background image
Correct answer: Applies a drop shadow using CSS box-shadow
The `shadow` class applies a medium `box-shadow` to the element; `shadow-sm` and `shadow-lg` provide smaller and larger variants.
Question 7: In Bootstrap's grid system, what happens when column classes in a row sum to more than 12?
- Bootstrap throws a console error
- All columns shrink proportionally to fit
- Excess columns wrap to a new line (Correct answer)
- The last column is hidden automatically
Correct answer: Excess columns wrap to a new line
When Bootstrap column widths exceed 12 in a row, the overflow columns wrap onto the next line, since the grid uses flexbox wrapping.
Bootstrap Technology & Digital Applications 5
How do you customize Bootstrap's default theme colors using Sass?