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.