Alert variants and colors in Bootsrap - Mini Project: Build & Apply

Alert Variants and Colors with Bootstrap

📖 Scenario: You are building a simple webpage that shows different alert messages to users. Each alert has a different color and style to show its importance or type.

🎯 Goal: Create a webpage that displays five Bootstrap alert boxes with different variants and colors: primary, secondary, success, warning, and danger. Each alert should have the correct Bootstrap class and show a short message describing its type.

📋 What You'll Learn

Use Bootstrap 5 alert classes for styling

Create five alert boxes with classes: alert-primary, alert-secondary, alert-success, alert-warning, alert-danger

Each alert box should contain text describing its variant, e.g., 'This is a primary alert'

Use semantic HTML5 structure with a

section

Include the Bootstrap CSS link in the for styling

💡 Why This Matters

🌍 Real World

Websites often need to show messages to users, like success confirmations or warnings. Using Bootstrap alerts helps create consistent, colorful messages that users can easily understand.

💼 Career

Knowing how to use Bootstrap alerts is useful for front-end developers to quickly build user-friendly interfaces with clear feedback messages.

1

Create the basic HTML structure with Bootstrap CSS link

Write the basic HTML5 skeleton with lang="en", charset="UTF-8", and viewport meta tags. Include the Bootstrap 5 CSS CDN link inside the <head>. Add a <main> element with a comment inside it.

Bootsrap

    
    
    
    Bootstrap Alerts


    
        
    

Hint

Remember to include the Bootstrap CSS link inside the <head> section so the alerts get styled properly.

2

Add a primary alert box inside the main section

Inside the <main> element, add a <div> with the classes alert and alert-primary. Inside this div, write the text: This is a primary alert.

Bootsrap

    
    
    
    Bootstrap Alerts


    
        
        
    

Hint

Use a div with classes alert and alert-primary inside the main element.

3

Add four more alert boxes with secondary, success, warning, and danger variants

Below the primary alert div, add four more div elements with classes alert alert-secondary, alert alert-success, alert alert-warning, and alert alert-danger. Each should contain text describing its variant exactly as: This is a secondary alert, This is a success alert, This is a warning alert, and This is a danger alert respectively.

Bootsrap

    
    
    
    Bootstrap Alerts


    
        This is a primary alert
        
        
    

Hint

Each alert uses the alert class plus its variant class like alert-success. Write them one after another inside main.

4

Add aria roles and container for accessibility and layout

Wrap all alert divs inside a <section> with role="alert" attribute for accessibility. Also, add a Bootstrap container class by wrapping the section inside a <div> with class container mt-4 inside the <main>. This will center the alerts and add margin on top.

Bootsrap

    
    
    
    Bootstrap Alerts


    
        
        
        
    

Hint

Use a div with class container mt-4 inside main. Inside that, add a section with role="alert" wrapping all alert divs.

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