Alert variants and colors in Bootsrap

Introduction

Alerts help show important messages to users in a clear and colorful way.

To show success messages after a user completes a task.

To warn users about something they should notice.

To display error messages when something goes wrong.

To provide informational tips or updates.

To highlight different types of messages with distinct colors.

Syntax

Bootsrap

<div class="alert alert-variant" role="alert">Your message here</div>

Replace alert-variant with the color style you want, like alert-success or alert-danger.

The role="alert" helps screen readers know this is an important message.

Examples

A blue alert for general information.

Bootsrap

<div class="alert alert-primary" role="alert">This is a primary alert.</div>

A green alert to show success.

Bootsrap

<div class="alert alert-success" role="alert">Success! Your action worked.</div>

A yellow alert to warn users.

Bootsrap

<div class="alert alert-warning" role="alert">Warning! Check this carefully.</div>

A red alert to show errors.

Bootsrap

<div class="alert alert-danger" role="alert">Error! Something went wrong.</div>

Sample Program

This page shows different alert boxes with colors from Bootstrap. Each alert uses a different variant class to show how messages can look.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Alert Variants</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Bootstrap Alert Variants and Colors</h1>
    <div class="alert alert-primary" role="alert">This is a primary alert.</div>
    <div class="alert alert-success" role="alert">Success! Your action worked.</div>
    <div class="alert alert-warning" role="alert">Warning! Check this carefully.</div>
    <div class="alert alert-danger" role="alert">Error! Something went wrong.</div>
    <div class="alert alert-info" role="alert">Info: Here is some information.</div>
    <div class="alert alert-light" role="alert">Light alert with subtle background.</div>
    <div class="alert alert-dark" role="alert">Dark alert with strong background.</div>
  </main>
</body>
</html>

Important Notes

Use semantic colors to match the message type for better user understanding.

Alerts are responsive and will adjust on different screen sizes.

Always include role="alert" for accessibility.

Summary

Alerts show messages with different colors using alert-variant classes.

Common variants include primary, success, warning, danger, info, light, and dark.

Use alerts to clearly communicate status or important info to users.

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