Alert variants and colors in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap alert with a primary color.

Bootsrap

<div class="alert alert-[1]" role="alert">
  This is a primary alert—check it out!
</div>

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

Aprimary

Bdanger

Csuccess

Dsecondary

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not a Bootstrap alert variant

Forgetting to add the alert- prefix

The class alert-primary gives the alert a blue primary color in Bootstrap.

2fill in blank

medium

Complete the code to create a Bootstrap alert with a danger variant.

Bootsrap

<div class="alert alert-[1]" role="alert">
  This is a danger alert—be careful!
</div>

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

Ainfo

Bwarning

Cdanger

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert-warning instead of alert-danger

Misspelling the variant name

The alert-danger class creates a red alert to indicate danger or errors.

3fill in blank

hard

Fix the error in the alert class to show a success alert with green color.

Bootsrap

<div class="alert [1]" role="alert">
  Operation completed successfully!
</div>

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

Aalert-success

Balert success

Calert-successful

Dsuccess-alert

Attempts:

3 left

💡 Hint

Common Mistakes

Using spaces instead of dashes in class names

Adding extra letters to the variant name

The correct Bootstrap class for a green success alert is alert-success. It must be one word with a dash.

4fill in blank

hard

Fill both blanks to create a Bootstrap alert with a warning variant and add the role attribute.

Bootsrap

<div class="alert alert-[1]" role="[2]">
  Warning! Check your input.
</div>

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

Awarning

Balert

Cdanger

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using button as the role instead of alert

Choosing the wrong variant color

The class alert-warning creates a yellow warning alert. The role attribute should be alert for accessibility.

5fill in blank

hard

Fill all three blanks to create a dismissible Bootstrap alert with a success variant and the correct button attributes.

Bootsrap

<div class="alert alert-[1] alert-dismissible fade show" role="alert">
  Success! Your action was completed.
  <button type="button" class="btn-close" data-bs-dismiss="[2]" aria-label="[3]"></button>
</div>

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

Adanger

Balert

CClose

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variant like danger instead of success

Incorrect data-bs-dismiss value

Wrong aria-label text

The alert variant is alert-success for green color. The button dismisses the alert and the aria-label should be Close for screen readers.