Spinner components in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this spinner code?

Look at the following Bootstrap spinner code. What will you see on the webpage?

Bootsrap

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

A A spinning square with visible text 'Loading...'

B A blue circular spinner rotating with hidden text for screen readers

C A static blue circle with visible text 'Loading...'

D No spinner visible, only the text 'Loading...' shown

💡 Hint

Remember that 'spinner-border' creates a rotating circle and 'visually-hidden' hides text visually but keeps it for screen readers.

The 'spinner-border' class creates a rotating circular spinner. The 'text-primary' class colors it blue. The span with 'visually-hidden' hides the text visually but keeps it accessible for screen readers, so only the spinner is visible.

📝 Syntax

intermediate

Which option correctly creates a growing spinner in Bootstrap?

Bootstrap has two spinner types: border and growing. Which code snippet correctly creates a growing spinner?

A

<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

B

<div class="spinner-border-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

C

<div class="spinner-grow text-success" aria-hidden="true">
  Loading...
</div>

D

<div class="spinner-grow-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

💡 Hint

The correct class for a growing spinner is 'spinner-grow'.

The class 'spinner-grow' creates a growing spinner. Options A and B use invalid class names. Option A hides the spinner from screen readers and shows visible text, which is not the recommended pattern.

❓ accessibility

advanced

What accessibility role should a spinner have for screen readers?

You want to make sure your spinner is accessible. Which ARIA role is correct to use on a spinner element?

A role="alert"

B role="presentation"

C role="progressbar"

D role="status"

💡 Hint

The spinner indicates loading status but does not show progress percentage.

The 'status' role announces dynamic status updates to screen readers without interrupting. 'alert' is for urgent messages, 'progressbar' is for known progress, and 'presentation' hides from assistive tech.

❓ layout

advanced

How to center a Bootstrap spinner horizontally and vertically in a full viewport?

You want to place a spinner exactly in the center of the screen both horizontally and vertically. Which CSS approach works best with Bootstrap classes?

A Wrap spinner in a div with 'position-absolute top-50 start-50' and no transform

B Use 'text-center' on the spinner and set margin-top: 50vh in CSS

C Use a container with classes 'd-flex justify-content-center align-items-center vh-100' wrapping the spinner

D Use 'mx-auto my-auto' on spinner with fixed width and height

💡 Hint

Flexbox utilities in Bootstrap can center content easily.

The 'd-flex' makes the container a flexbox, 'justify-content-center' centers horizontally, 'align-items-center' centers vertically, and 'vh-100' makes container full viewport height. This centers the spinner perfectly.

🧠 Conceptual

expert

Which spinner type is better for unknown loading duration and why?

Bootstrap offers 'spinner-border' and 'spinner-grow'. Which spinner type is more suitable when the loading time is unknown and why?

A 'spinner-border' because its continuous rotation visually indicates ongoing activity without implying progress

B 'spinner-grow' because its expanding animation suggests progress completion over time

C 'spinner-border' because it uses less CPU and battery on devices

D 'spinner-grow' because it is more accessible for screen readers

💡 Hint

Think about what the animation communicates to users about loading.

'spinner-border' uses a rotating circle that implies ongoing activity without suggesting how much is done. 'spinner-grow' looks like something expanding, which can imply progress. For unknown durations, 'spinner-border' is clearer.