Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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