Dismissible alerts in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap dismissible alert?

Look at the following HTML code using Bootstrap 5. What will you see in the browser?

Bootsrap

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

A A yellow alert box with no close button visible.

B A red alert box with bold text 'Warning!' and a close button that does nothing when clicked.

C A yellow alert box with bold text 'Warning!' and a close button on the right side that can hide the alert when clicked.

D A green alert box with bold text 'Warning!' and a close button that reloads the page when clicked.

💡 Hint

Remember that 'alert-warning' gives a yellow background and 'btn-close' creates a functional close button.

The 'alert-warning' class styles the alert with a yellow background. The 'alert-dismissible' and 'btn-close' together create a close button that hides the alert when clicked. The 'fade show' classes add a smooth fade effect.

📝 Syntax

intermediate

Which option correctly adds a dismissible alert with a close button in Bootstrap 5?

Choose the correct HTML snippet that creates a dismissible alert with a close button that works.

A

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

B

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>

C

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

D

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Info alert.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
</div>

💡 Hint

Bootstrap 5 uses 'btn-close' and 'data-bs-dismiss' attributes for dismissible alerts.

Option A uses the correct class 'btn-close' and the correct attribute 'data-bs-dismiss="alert"' which Bootstrap 5 requires for the close button to work. Other options use outdated or incorrect classes or attributes.

❓ accessibility

advanced

Which attribute improves accessibility for the dismiss button in a Bootstrap alert?

What attribute should be added to the close button to help screen readers understand its purpose?

A aria-hidden="true"

B aria-label="Close"

C role="button"

D tabindex="-1"

💡 Hint

Think about what label a screen reader needs to announce the button's function.

The 'aria-label="Close"' attribute tells screen readers that the button is for closing the alert. 'role="button"' is redundant because the element is already a button. 'tabindex="-1"' removes the button from keyboard navigation, which is bad. 'aria-hidden="true"' hides the button from screen readers, which is also bad.

❓ selector

advanced

Which CSS selector targets only the close button inside a Bootstrap dismissible alert?

Choose the CSS selector that selects the close button inside alerts with class 'alert-dismissible'.

A .alert-dismissible .btn-close

B .alert-dismissible > .btn-close

C .btn-close.alert-dismissible

D button.btn-close.alert-dismissible

💡 Hint

Remember the difference between direct child (>) and any descendant (space).

Option A selects any element with class 'btn-close' inside any descendant of '.alert-dismissible', which matches the close button inside the alert. Option A only selects direct children, which may fail if the button is nested. Options C and D look for elements with both classes on the same element, which is not the case.

🧠 Conceptual

expert

What happens if you omit the 'data-bs-dismiss="alert"' attribute on the close button in a Bootstrap dismissible alert?

Consider a dismissible alert with a close button that lacks the 'data-bs-dismiss="alert"' attribute. What is the result when the button is clicked?

A The alert will close but with a delay of 5 seconds.

B The alert will close normally because the button's class 'btn-close' is enough to trigger dismissal.

C Clicking the button will reload the page because the attribute is missing.

D The alert will not close because Bootstrap's JavaScript listens for 'data-bs-dismiss="alert"' to trigger hiding.

💡 Hint

Bootstrap's JavaScript uses specific attributes to know which elements trigger actions.

Bootstrap's JavaScript requires the 'data-bs-dismiss="alert"' attribute on the button to know it should hide the alert. Without it, clicking the button does nothing even if it looks like a close button.