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.
Warning: Yellow/orange color, means caution or something to watch.
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:

<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.

Practice

1. Which Bootstrap class would you use to create a green alert box indicating success?
<div class="alert ?" role="alert">Success message</div>

easy

A. alert-warning

B. alert-success

C. alert-danger

D. alert-info

Solution

1. Step 1: Understand Bootstrap alert color meanings

   Bootstrap uses alert-success for green alerts indicating success.

2. Step 2: Match the class to the color green

   The alert-success class applies green background and border to the alert box.

3. Final Answer:

   alert-success -> Option B

4. Quick Check:

   Green alert = alert-success [OK]

Hint: Success alerts are always green with alert-success class [OK]

Common Mistakes:

• Using alert-danger for success (red color)
• Using alert-warning which is yellow
• Confusing alert-info with success

2. Which of the following is the correct syntax to create a Bootstrap alert with a blue background for informational messages?
<div class="alert ?" role="alert">Info message</div>

easy

A. alert-light

B. alert-primary

C. alert-info

D. alert-dark

Solution

1. Step 1: Identify the class for informational alerts

   Bootstrap uses alert-info for blue background alerts that show info messages.

2. Step 2: Confirm syntax correctness

   The class alert-info is the correct class to apply blue styling for info alerts.

3. Final Answer:

   alert-info -> Option C

4. Quick Check:

   Info alert = alert-info [OK]

Hint: Info alerts use alert-info class for blue color [OK]

Common Mistakes:

• Using alert-primary which is darker blue but not info
• Using alert-light which is very pale
• Using alert-dark which is black/dark gray

3. What color will the alert box have when using this code?

<div class="alert alert-warning" role="alert">Warning!</div>

medium

A. Yellow background

B. Blue background

C. Green background

D. Red background

Solution

1. Step 1: Identify the alert variant class

   The class alert-warning is used for warning alerts in Bootstrap.

2. Step 2: Recall the color for warning alerts

   Bootstrap styles alert-warning with a yellow background to indicate caution or warning.

3. Final Answer:

   Yellow background -> Option A

4. Quick Check:

   Warning alert = yellow background [OK]

Hint: Warning alerts always have yellow backgrounds [OK]

Common Mistakes:

• Confusing warning with danger (red)
• Thinking warning is green
• Mixing up warning with info (blue)

4. You wrote this code but the alert is not accessible to screen readers:

<div class="alert alert-danger">Error occurred</div>

What is missing or incorrect?

medium

A. The alert-danger class does not exist in Bootstrap

B. Class name should be danger instead of alert-danger

C. The alert class is missing, only alert-danger is present

D. Missing role="alert" attribute for accessibility

Solution

1. Step 1: Check the alert classes used

   The code uses both alert and alert-danger classes correctly, so the styling should apply.

2. Step 2: Identify missing accessibility attribute

   Bootstrap recommends adding role="alert" for screen readers to recognize the alert properly.

3. Final Answer:

   Missing role="alert" attribute for accessibility -> Option D

4. Quick Check:

   Alerts need role="alert" for proper behavior [OK]

Hint: Always add role="alert" for Bootstrap alerts [OK]

Common Mistakes:

• Thinking alert-danger class is wrong
• Forgetting to add alert base class
• Assuming alert-danger does not exist

5. You want to create a Bootstrap alert that changes color based on a variable status in JavaScript. Which approach correctly applies the alert variant class dynamically?

const status = 'danger';
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-' + status;
alertDiv.setAttribute('role', 'alert');
alertDiv.textContent = 'Status message';
document.body.appendChild(alertDiv);

hard

A. This code correctly applies the alert-danger class dynamically

B. You must use alert-danger directly, not concatenate strings

C. The role attribute should be set to 'status' instead of 'alert'

D. alertDiv.className should be set to 'alert-danger' only

Solution

1. Step 1: Understand dynamic class assignment

   The code concatenates 'alert-' with the variable status to form 'alert-danger', which is valid.

2. Step 2: Verify role attribute and appending

   The role is correctly set to 'alert' for accessibility, and the element is appended to the document body.

3. Final Answer:

   This code correctly applies the alert-danger class dynamically -> Option A

4. Quick Check:

   Dynamic class with 'alert-' + status works [OK]

Hint: Concatenate 'alert-' with status variable for dynamic alerts [OK]

Common Mistakes:

• Hardcoding class instead of using variable
• Setting wrong role attribute
• Not appending alert to the DOM