Bootstrap Case Studies & Practical Application 4 — Questions and Answers
Question 1: A developer wants to show a loading spinner while data fetches. Which Bootstrap component and class create a spinning indicator?
- <div class="spinner-border"> with a visually-hidden span for accessibility (Correct answer)
- <div class="loading-spinner"> with spinner-animation class
- <span class="bootstrap-spinner"> with role="alert"
- <div class="spin-circle"> with spin-border class
Correct answer: <div class="spinner-border"> with a visually-hidden span for accessibility
Bootstrap's spinner-border class creates a CSS-animated circular spinner, and a visually-hidden span provides screen-reader text.
Question 2: An admin panel uses Bootstrap's table with many columns. On mobile the table overflows horizontally. What is the Bootstrap solution?
- Wrap the table in a div with the table-responsive class (Correct answer)
- Add responsive class directly to the table element
- Add overflow-x-auto utility to the table element
- Use table-fluid class on the table element
Correct answer: Wrap the table in a div with the table-responsive class
table-responsive on a wrapper div enables horizontal scrolling on small screens while keeping the table's original structure.
Question 3: A form has a text input paired with a button (like a search bar). Which Bootstrap component keeps them inline and visually joined?
- Input group with input-group class wrapping both (Correct answer)
- Form-inline class on the parent form
- Flex-form class with gap-0 on the container
- Joined-inputs class with btn-append modifier
Correct answer: Input group with input-group class wrapping both
Bootstrap's input-group component visually connects form controls and buttons, removing the gap between them with proper border handling.
Question 4: A Bootstrap tooltip is not appearing on a custom disabled button. What is the most likely cause and fix?
- Disabled elements don't fire events; wrap the button in a span and init the tooltip on the span (Correct answer)
- Add data-bs-trigger="click" to activate tooltips on disabled elements
- Use title attribute instead of data-bs-title on disabled buttons
- Call bootstrap.Tooltip.getInstance() instead of new bootstrap.Tooltip()
Correct answer: Disabled elements don't fire events; wrap the button in a span and init the tooltip on the span
Pointer events are blocked on disabled elements, so Bootstrap recommends wrapping them in a span to catch mouse events for tooltip triggering.
Question 5: A pricing page shows three plan cards that should stretch to equal height in a row. Which Bootstrap utility ensures equal card heights?
- Add h-100 to each card inside a d-flex flex-column column (Correct answer)
- Add card-equal-height class to the row
- Add flex-stretch to the row element
- Set align-items-fill on the row element
Correct answer: Add h-100 to each card inside a d-flex flex-column column
h-100 on the card combined with a flex column layout makes all cards stretch to the tallest card's height in the row.
Question 6: A developer needs to right-align a button inside a flex container using Bootstrap. Which utility class achieves this?
- ms-auto (Correct answer)
- me-0
- float-end
- text-end
Correct answer: ms-auto
ms-auto sets margin-start (left margin) to auto in a flex container, pushing the element to the end (right in LTR layouts).
Question 7: A Bootstrap accordion is used for an FAQ page. By default, only one item should be open at a time. Which attribute on the accordion achieves this?
- data-bs-parent pointing to the accordion's ID (Correct answer)
- accordion-exclusive="true" on the accordion wrapper
- data-bs-toggle="single" on each accordion button
- single-open class on the accordion wrapper
Correct answer: data-bs-parent pointing to the accordion's ID
Setting data-bs-parent to the parent accordion's ID ensures that opening one item collapses all other items in the same accordion.
Bootstrap Case Studies & Practical Application 4
A developer wants to show a loading spinner while data fetches.
Which Bootstrap component and class create a spinning indicator?