Bootstrap Professional Standards & Competencies 2 — Questions and Answers
Question 1: Which Bootstrap utility class enforces a consistent visual hierarchy by limiting text to a single line with an ellipsis?
- text-truncate (Correct answer)
- text-nowrap
- text-overflow
- text-clip
Correct answer: text-truncate
The `text-truncate` class applies `overflow: hidden`, `text-overflow: ellipsis`, and `white-space: nowrap` to clip overflowing text.
Question 2: A developer uses `col-md-6 col-lg-4` on a card. At the large breakpoint, how many cards fit in a 12-column row?
- 2
- 3 (Correct answer)
- 4
- 6
Correct answer: 3
At the `lg` breakpoint each card consumes 4 columns, so 12 ÷ 4 = 3 cards per row.
Question 3: According to Bootstrap's accessibility guidelines, every `<form>` input should be associated with a visible label using which attribute?
- aria-label
- for (Correct answer)
- name
- placeholder
Correct answer: for
The `for` attribute on `<label>` links it to the input's `id`, enabling screen readers and click-to-focus behavior.
Question 4: When customizing Bootstrap via Sass, changing `$grid-gutter-width` before importing Bootstrap ensures what?
- Only column widths change
- Gutter overrides cascade through all generated utilities (Correct answer)
- The change applies only to flexbox containers
- Bootstrap ignores the override at compile time
Correct answer: Gutter overrides cascade through all generated utilities
Bootstrap's `!default` flag means variables set before the import win, so a new `$grid-gutter-width` propagates to all gutter-related utilities and mixins.
Question 5: Which practice best maintains semantic HTML while using Bootstrap's display utilities?
- Replace all headings with `<div class='h1'>`
- Use heading tags with Bootstrap typography classes for styling only (Correct answer)
- Use `<p>` tags with `class='h1'` for all headings
- Avoid heading tags and rely solely on `fw-bold` classes
Correct answer: Use heading tags with Bootstrap typography classes for styling only
Keeping semantic heading elements while applying Bootstrap's `.h1`–`.h6` sizing classes preserves document structure for assistive technologies.
Question 6: A professional Bootstrap workflow uses `npm install bootstrap` rather than a CDN primarily to enable which benefit?
- Faster page load via hot-reload
- Tree-shaking and Sass variable customization (Correct answer)
- Automatic polyfills for IE6
- Built-in service worker caching
Correct answer: Tree-shaking and Sass variable customization
Installing via npm lets you import only the components you need and override Sass variables before compilation, reducing bundle size.
Question 7: Which Bootstrap component requires the `data-bs-toggle` and `data-bs-target` attributes to function without writing JavaScript?
- Badge
- Alert
- Modal (Correct answer)
- Breadcrumb
Correct answer: Modal
Bootstrap's modal uses `data-bs-toggle='modal'` and `data-bs-target='#id'` on a trigger element to open the modal via its built-in JS plugin.
Bootstrap Professional Standards & Competencies 2
Which Bootstrap utility class enforces a consistent visual hierarchy by limiting text to a single line with an ellipsis?