Alert variants and colors in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Bootstrap alert variant?

A Bootstrap alert variant is a style option that changes the color and appearance of an alert box to indicate different meanings like success, warning, danger, or info.

beginner

Name three common Bootstrap alert variants and their typical meanings.

Success: Green color, means a positive action or success.<br>Warning: Yellow/orange color, means caution or something to watch.<br>Danger: Red color, means an error or serious problem.

beginner

How do you add a success alert in Bootstrap using HTML?

Use a <div> with classes alert and alert-success. Example:<br>

<div class="alert alert-success" role="alert">Success message here.</div>

intermediate

What role attribute should you add to Bootstrap alerts for accessibility?

Add role="alert" to the alert container. This helps screen readers announce the alert message immediately.

intermediate

Can Bootstrap alert variants be customized with your own colors?

Yes, you can customize alert colors by overriding Bootstrap CSS variables or adding your own CSS styles to change the background and text colors.

Which Bootstrap class creates a red alert box?

A alert-info

B alert-warning

C alert-success

D alert-danger

The class alert-danger creates a red alert box indicating danger or error.

What is the purpose of the role="alert" attribute in Bootstrap alerts?

A To style the alert with colors

B To help screen readers announce the alert immediately

C To add animation effects

D To make the alert dismissible

The role="alert" attribute helps screen readers announce the alert message right away for accessibility.

Which alert variant is typically yellow or orange in Bootstrap?

A alert-warning

B alert-primary

C alert-success

D alert-secondary

The alert-warning variant is usually yellow or orange to signal caution.

How do you make a Bootstrap alert dismissible (able to close)?

A Add class <code>alert-dismissible</code> and include a close button

B Add class <code>alert-close</code>

C Add class <code>alert-hide</code>

D Add class <code>alert-remove</code>

Adding alert-dismissible and a close button allows users to close the alert.

Which Bootstrap alert variant is used for informational messages?

A alert-success

B alert-danger

C alert-info

D alert-warning

The alert-info variant is used for informational messages and usually has a blue color.

Explain how Bootstrap alert variants help users understand different types of messages on a website.

Think about how colors like green or red make you feel about the message.

Describe how to create an accessible alert in Bootstrap that can be read by screen readers.

Accessibility means everyone can understand the message, including people using special tools.