Dismissible alerts in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a dismiss button to the alert.

Bootsrap

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Warning! This is a dismissible alert.
  <button type="button" class="btn-close" data-bs-dismiss="[1]" aria-label="Close"></button>
</div>

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

Amodal

Bdropdown

Calert

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using data-bs-dismiss="modal" instead of "alert"

Forgetting the data-bs-dismiss attribute

Using incorrect component names like "dropdown"

The data-bs-dismiss attribute should be set to "alert" to make the button dismiss the alert box.

2fill in blank

medium

Complete the code to make the alert fade out smoothly when dismissed.

Bootsrap

<div class="alert alert-success alert-dismissible [1] show" role="alert">
  Success! You can close this alert.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

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

Afade

Bvisible

Chidden

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using "collapse" class which is for different components

Omitting the fade class so alert disappears abruptly

Using "hidden" or "visible" which are not Bootstrap classes

Adding the "fade" class makes the alert fade out smoothly when dismissed.

3fill in blank

hard

Fix the error in the button to properly dismiss the alert.

Bootsrap

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  Danger! This alert can be dismissed.
  <button type="button" class="btn-close" data-bs-dismiss="[1]" aria-label="Close"></button>
</div>

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

Aalert

Bmodal

Cbutton

Dtoast

Attempts:

3 left

💡 Hint

Common Mistakes

Using data-bs-dismiss="modal" or "toast" which do not dismiss alerts

Using data-bs-dismiss="button" which is invalid

The data-bs-dismiss attribute must be set to "alert" to dismiss the alert component correctly.

4fill in blank

hard

Fill both blanks to create a dismissible info alert with fade effect.

Bootsrap

<div class="alert alert-info alert-dismissible [1] show" role="alert">
  Info alert with fade effect.
  <button type="button" class="btn-close" data-bs-dismiss="[2]" aria-label="Close"></button>
</div>

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

Afade

Bmodal

Calert

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up component names in data-bs-dismiss

Forgetting the fade class for smooth animation

The "fade" class adds the fade effect and data-bs-dismiss="alert" makes the button dismiss the alert.

5fill in blank

hard

Fill all three blanks to create a dismissible primary alert with fade and show classes.

Bootsrap

<div class="alert alert-primary alert-dismissible [1] [2]" role="alert">
  Primary alert with dismiss button.
  <button type="button" class="btn-close" data-bs-dismiss="[3]" aria-label="Close"></button>
</div>

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

Ahidden

Bshow

Calert

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using "hidden" instead of "show" for visibility

Omitting the fade class for animation

Wrong data-bs-dismiss value like "modal"

The "fade" and "show" classes enable fade animation and visibility, and data-bs-dismiss="alert" makes the button dismiss the alert.