Spinner components in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap spinner.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Abutton

Balert

Cstatus

Dprogressbar

Attempts:

3 left

💡 Hint

Common Mistakes

Using role="alert" which is for urgent messages.

Using role="button" which is for interactive elements.

The role="status" attribute tells assistive technologies that this spinner is a status message, indicating loading.

2fill in blank

medium

Complete the code to create a small spinner using Bootstrap classes.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Aspinner-sm

Bspinner-mini

Cspinner-xs

Dspinner-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent classes like spinner-xs or spinner-mini.

Using spinner-lg which makes the spinner larger.

The class spinner-sm makes the spinner smaller than the default size.

3fill in blank

hard

Fix the error in the spinner code by completing the missing class.

Bootsrap

<div class="[1] text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Drag options to blanks, or click blank then click option'

Aspinner-grow

Bspinner-border

Cspinner-borderd

Dspinner-growd

Attempts:

3 left

💡 Hint

Common Mistakes

Adding extra letters like 'd' at the end of the class name.

Using spinner-growd which is invalid.

The correct class for the border spinner is spinner-border. Misspelled classes cause the spinner not to show.

4fill in blank

hard

Fill both blanks to create a growing spinner with a secondary color and accessible label.

Bootsrap

<div class="[1] text-secondary" role="[2]">
  <span class="visually-hidden">Loading...</span>
</div>

Drag options to blanks, or click blank then click option'

Aspinner-grow

Bstatus

Calert

Dspinner-border

Attempts:

3 left

💡 Hint

Common Mistakes

Using spinner-border instead of spinner-grow for the growing spinner.

Using role="alert" which is not appropriate here.

spinner-grow creates the growing spinner style, and role="status" provides accessibility for screen readers.

5fill in blank

hard

Fill all three blanks to create a large border spinner with a warning color and proper accessibility role.

Bootsrap

<div class="spinner-border [1] text-warning" role="[2]">
  <span class="[3]">Loading...</span>
</div>

Drag options to blanks, or click blank then click option'

Aspinner-sm

Bstatus

Cvisually-hidden

Dspinner-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using spinner-sm which makes the spinner small.

Forgetting to add the visually-hidden class to the span.

spinner-lg makes the spinner large, role="status" is for accessibility, and visually-hidden hides the loading text visually but keeps it for screen readers.

Practice

1. What is the main purpose of Bootstrap spinner components?

easy

A. To show a loading or processing state visually

B. To create navigation menus

C. To style buttons with colors

D. To add images to the page

Solution

1. Step 1: Understand spinner usage

   Spinners are used to indicate that something is loading or processing in the background.

2. Step 2: Identify spinner purpose in Bootstrap

   Bootstrap spinner components visually show this loading state to users.

3. Final Answer:

   To show a loading or processing state visually -> Option A

4. Quick Check:

   Spinner = Loading indicator [OK]

Hint: Spinners always mean loading or waiting [OK]

Common Mistakes:

• Thinking spinners are for decoration only
• Confusing spinners with buttons
• Using spinners for static images

2. Which of the following is the correct Bootstrap class to create a border spinner?

easy

A. spinner-grow

B. spinner-spin

C. spinner-border

D. spinner-circle

Solution

1. Step 1: Recall Bootstrap spinner classes

   Bootstrap provides two main spinner classes: spinner-border and spinner-grow.

2. Step 2: Identify the border spinner class

   The class spinner-border creates a spinner with a border style.

3. Final Answer:

   spinner-border -> Option C

4. Quick Check:

   Border spinner class = spinner-border [OK]

Hint: Border spinner always uses spinner-border class [OK]

Common Mistakes:

• Using spinner-grow for border spinner
• Typing class names incorrectly
• Confusing spinner classes with button classes

3. What will be the visible result of this code snippet?

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

medium

A. A growing spinner with blue color and hidden accessible text

B. A border spinner with red color and visible text

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

D. No spinner shown, only text visible

Solution

1. Step 1: Analyze spinner-grow and text-primary classes

   The spinner-grow class creates a growing spinner animation. The text-primary class applies Bootstrap's primary blue color.

2. Step 2: Understand role and visually-hidden span

   The role="status" helps screen readers. The span with visually-hidden hides the text visually but keeps it accessible.

3. Final Answer:

   A growing spinner with blue color and hidden accessible text -> Option A

4. Quick Check:

   spinner-grow + text-primary = blue growing spinner [OK]

Hint: spinner-grow + text-primary = blue growing spinner [OK]

Common Mistakes:

• Thinking text-primary changes text color only
• Expecting visible text from visually-hidden span
• Confusing spinner-grow with spinner-border

4. Identify the error in this spinner code:

<div class="spinner-border" aria-label="Loading">
  <span>Loading...</span>
</div>

medium

A. aria-label should be aria-labelledby

B. Incorrect class name spinner-border

C. Missing role="status" attribute for accessibility

D. Span should have class visually-hidden for screen readers

Solution

1. Step 1: Check accessibility best practices for spinners

   Bootstrap recommends adding a span with visually-hidden class inside spinners to provide accessible text for screen readers.

2. Step 2: Analyze given code

   The span inside the spinner lacks the visually-hidden class, so the text is visible visually, which is not ideal.

3. Final Answer:

   Span should have class visually-hidden for screen readers -> Option D

4. Quick Check:

   Accessible text inside spinner needs visually-hidden class [OK]

Hint: Use visually-hidden class on spinner text for accessibility [OK]

Common Mistakes:

• Omitting visually-hidden class
• Using aria-label instead of role
• Confusing aria-label with aria-labelledby

5. You want to create a spinner that grows in size and uses the Bootstrap danger color with accessible text. Which code snippet correctly achieves this?

hard

A. Loading...

B. Loading...

C. Loading...

D. Loading...

Solution

1. Step 1: Choose spinner-grow for growing animation

   The question asks for a spinner that grows in size, so spinner-grow is the correct class.

2. Step 2: Apply danger color and accessibility

   The text-danger class applies the red color. The role="status" and span with visually-hidden provide accessible loading text.

3. Step 3: Verify all requirements

   Loading... uses spinner-grow, text-danger, role="status", and hidden accessible text correctly.

4. Final Answer:

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

5. Quick Check:

   Growing spinner + danger color + accessible text =
   Loading...
   [OK]

Hint: spinner-grow + text-danger + visually-hidden span = correct combo [OK]

Common Mistakes:

• Using spinner-border instead of spinner-grow
• Missing role="status"
• Not hiding accessible text visually