Bootstrap Case Studies & Practical Application 4

Question 1

A developer wants to show a loading spinner while data fetches. Which Bootstrap component and class create a spinning indicator?

Accepted Answer

with a visually-hidden span for accessibility

Answer

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?

Accepted Answer

Wrap the table in a div with the table-responsive class

Answer

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?

Accepted Answer

Input group with input-group class wrapping both

Answer

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?

Accepted Answer

Disabled elements don't fire events; wrap the button in a span and init the tooltip on the span

Answer

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?

Accepted Answer

Add h-100 to each card inside a d-flex flex-column column

Answer

h-100 on the card combined with a flex column layout makes all cards stretch to the tallest card's height in the row.

Bootstrap Practice Test