Dismissible alerts in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a dismissible alert in Bootstrap?

A dismissible alert is a message box that users can close or hide by clicking a close button. It helps show important info that can be removed when no longer needed.

beginner

Which Bootstrap class makes an alert dismissible?

The class alert-dismissible is added to the alert container to make it dismissible.

beginner

What HTML element is used for the close button in a dismissible alert?

A <code>&lt;button&gt;</code> element with <code>btn-close</code> class and <code>data-bs-dismiss="alert"</code> attribute is used for the close button.

intermediate

Why is it important to include aria-label="Close" on the dismiss button?

It improves accessibility by letting screen readers know the button's purpose is to close the alert.

intermediate

How does Bootstrap handle the alert dismissal behavior?

Bootstrap uses JavaScript to listen for clicks on the close button and then removes the alert from the page smoothly.

Which class do you add to a Bootstrap alert to make it dismissible?

A alert-dismiss

B alert-close

C alert-hide

D alert-dismissible

The alert-dismissible class enables the alert to be closed by the user.

What attribute must the close button have to dismiss the alert?

A data-dismiss="alert"

B data-bs-toggle="alert"

C data-bs-dismiss="alert"

D data-toggle="close"

The data-bs-dismiss="alert" attribute tells Bootstrap to close the alert when the button is clicked.

Which element is typically used for the close button in a dismissible alert?

A <button>

B <span>

C <a>

D <div>

A <button> element with the right classes and attributes is used for accessibility and functionality.

Why should you add aria-label="Close" to the close button?

A To help screen readers understand the button's purpose

B To style the button

C To improve keyboard navigation

D To make the button bigger

The aria-label helps screen readers announce the button as a close control.

What happens when you click the close button on a dismissible alert?

A The alert changes color

B The alert disappears smoothly

C The alert reloads the page

D Nothing happens

Bootstrap's JavaScript removes the alert from the page with a smooth transition.

Explain how to create a dismissible alert in Bootstrap and why it is useful.

Think about the classes and attributes needed and the user experience.

Describe the accessibility features important for dismissible alerts in Bootstrap.

Focus on how screen readers and keyboard users interact with the alert.