0
0
Bootsrapmarkup~5 mins

Alert variants and colors in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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>
OutputSuccess
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.