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.