Bootstrap Technology & Digital Applications 3 — Questions and Answers
Question 1: Which Bootstrap class applies a light gray background to a card's header or footer?
- card-bg-light
- bg-light (Correct answer)
- card-header
- card-muted
Correct answer: bg-light
`bg-light` applies Bootstrap's light background color utility, commonly used inside card headers and footers for visual distinction.
Question 2: What is the purpose of Bootstrap's `container-fluid` class compared to `container`?
- It adds extra padding on all sides
- It spans the full width of the viewport with no max-width (Correct answer)
- It centers content with a fixed pixel width
- It removes all margin and padding
Correct answer: It spans the full width of the viewport with no max-width
`container-fluid` always spans 100% of the viewport width, while `container` has responsive max-width breakpoints.
Question 3: Which Bootstrap utility would you use to visually hide an element while keeping it accessible to screen readers?
- d-none
- invisible
- visually-hidden (Correct answer)
- opacity-0
Correct answer: visually-hidden
`visually-hidden` (formerly `sr-only`) hides content visually but preserves it in the accessibility tree for screen readers.
Question 4: In a Bootstrap form, which class is required on an `<input>` element to apply Bootstrap's default form styling?
- form-element
- input-control
- form-control (Correct answer)
- bs-input
Correct answer: form-control
`form-control` applies Bootstrap's styled borders, padding, focus rings, and width to form inputs, selects, and textareas.
Question 5: What does the Bootstrap class `g-3` control in a grid or flexbox layout?
- Grid column order
- Gap (gutter) spacing between items (Correct answer)
- Element opacity level 3
- Grid span of 3 columns
Correct answer: Gap (gutter) spacing between items
`g-{n}` sets both horizontal and vertical gutters between grid columns and rows using Bootstrap's spacing scale.
Question 6: Which Bootstrap component is used to display a series of related navigation links in a tabbed interface?
- Accordion
- Nav tabs (Correct answer)
- Breadcrumb
- List group
Correct answer: Nav tabs
Bootstrap Nav Tabs (`nav-tabs` class with `nav-link` items) creates a tabbed navigation interface that pairs with Tab pane content.
Question 7: How does Bootstrap's `stretched-link` utility affect a card component?
- It makes the link text wrap to multiple lines
- It stretches the link to fill the entire containing block, making the whole card clickable (Correct answer)
- It underlines the link with a dashed border
- It changes the link color to the primary theme color
Correct answer: It stretches the link to fill the entire containing block, making the whole card clickable
`stretched-link` uses a `::after` pseudo-element to expand the link's click area to fill its nearest `position: relative` ancestor.
Bootstrap Technology & Digital Applications 3
Which Bootstrap class applies a light gray background to a card's header or footer?