Alert variants and colors in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What color will this alert have?

Given the following Bootstrap alert code, what color will the alert box appear as in the browser?

Bootsrap

<div class="alert alert-warning" role="alert">Watch out! This is a warning alert.</div>

A Blue background with white text

B Yellow background with dark text

C Red background with white text

D Green background with dark text

💡 Hint

Look at the class name 'alert-warning' and think about what color warnings usually have.

The class alert-warning in Bootstrap gives the alert a yellow background with dark text to indicate a warning.

🧠 Conceptual

intermediate

Which alert variant indicates success?

In Bootstrap, which alert variant class should you use to show a success message?

A alert-success

B alert-danger

C alert-primary

D alert-info

💡 Hint

Success messages usually use green colors.

The alert-success class is used for success messages and shows a green alert box.

📝 Syntax

advanced

What error occurs with this alert code?

What error will this HTML code cause when used in a Bootstrap page?

Bootsrap

<div class="alert alert-info" role="alert"><p>Information alert</p></div>

A Role attribute is invalid and causes error

B No error, alert renders correctly

C Syntax error due to missing closing bracket in div tag

D Bootstrap styles won't apply because of wrong class name

💡 Hint

Check the opening div tag carefully for missing characters.

The opening div tag is missing a closing '>' before the <p> tag, causing a syntax error in HTML.

❓ selector

advanced

Which CSS selector targets all Bootstrap danger alerts?

Which CSS selector will correctly select all Bootstrap alerts with the danger variant?

A .alert-danger

B #alert-danger

C alert-danger

D .danger-alert

💡 Hint

Bootstrap uses classes starting with 'alert-' for alert variants.

The class selector .alert-danger selects all elements with the class alert-danger, which is the Bootstrap danger alert variant.

❓ accessibility

expert

Why is the role="alert" attribute important in Bootstrap alerts?

What is the main accessibility benefit of adding role="alert" to Bootstrap alert elements?

A It hides the alert from all users

B It changes the alert color to red automatically

C It disables keyboard navigation inside the alert

D It makes the alert content read immediately by screen readers

💡 Hint

Think about how screen readers announce urgent messages.

The role="alert" attribute tells screen readers to announce the alert content immediately, helping users with visual impairments notice important messages.

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