Bootstrap Bootstrap 5 — Questions and Answers
Question 1: Which Bootstrap modal option prevents the modal from closing when the user clicks outside of it (on the backdrop)?
- data-bs-backdrop='static' (Correct answer)
- data-bs-dismiss='false'
- modal-locked
- data-bs-keyboard='false'
Correct answer: data-bs-backdrop='static'
Setting `data-bs-backdrop='static'` makes the modal non-dismissible by clicking the backdrop; the modal only closes via its close button or programmatic call.
Question 2: In Bootstrap's grid system, what happens when column widths in a row add up to more than 12?
- Bootstrap throws a JavaScript error
- The extra columns are hidden automatically
- Columns wrap to the next line (Correct answer)
- All columns collapse to full width
Correct answer: Columns wrap to the next line
Bootstrap's grid is based on CSS flexbox with `flex-wrap: wrap`, so columns exceeding a total of 12 units wrap to a new line automatically.
Question 3: What is the purpose of the Bootstrap `stretched-link` class?
- Makes a link span the full width of its parent
- Extends the clickable area of a link to cover its entire containing block (Correct answer)
- Creates a link with no underline
- Makes links stretch on hover with a CSS animation
Correct answer: Extends the clickable area of a link to cover its entire containing block
`stretched-link` uses a `::after` pseudo-element to make the containing block fully clickable, commonly used in cards to make the entire card clickable via a single anchor tag.
Question 4: Which Bootstrap JavaScript method programmatically shows a modal dialog that is already initialized?
- Modal.toggle()
- Modal.show() (Correct answer)
- Modal.open()
- Modal.display()
Correct answer: Modal.show()
The Bootstrap Modal instance method `show()` programmatically displays the modal, equivalent to a user clicking a button with `data-bs-toggle='modal'`.
Question 5: What does the Bootstrap class `container-fluid` do differently from `container`?
- It adds a fluid animation on scroll
- It spans the full width of the viewport at all screen sizes without max-width constraints (Correct answer)
- It removes padding from the container
- It creates a container only visible on fluid/large screens
Correct answer: It spans the full width of the viewport at all screen sizes without max-width constraints
`container-fluid` always spans 100% of the viewport width, while `container` has responsive max-width breakpoints that constrain its width at larger screens.
Question 6: Which Bootstrap utility applies a box shadow to an element?
- border-shadow
- shadow (Correct answer)
- elevation
- box-shadow
Correct answer: shadow
Bootstrap provides `shadow-sm`, `shadow`, and `shadow-lg` utility classes that apply progressively larger `box-shadow` values from the theme.
Question 7: In Bootstrap, what is the difference between `offset-md-3` and `ms-auto` for column positioning?
- They are identical in effect
- `offset-md-3` adds a fixed 3-column empty space before the column; `ms-auto` pushes the column to the right by consuming all available space (Correct answer)
- `ms-auto` only works on flex containers, not grid columns
- `offset-md-3` is Bootstrap 3 syntax that no longer works
Correct answer: `offset-md-3` adds a fixed 3-column empty space before the column; `ms-auto` pushes the column to the right by consuming all available space
`offset-md-3` inserts exactly 3 grid columns of margin before the element, while `ms-auto` (margin-start: auto) absorbs all available space to push the element rightward.
Bootstrap Bootstrap 5
Which Bootstrap modal option prevents the modal from closing when the user clicks outside of it (on the backdrop)?