Alerts & Badges

The two most common ‘status’ component in bootstrap are Alerts and Badges. They notify your user with something significant without having to end up with read a wall of text.

1. Alerts: The “Message” Boxes

Alerts are huge rectangular boxes, providing feedback for normal actions undertaken by the user. For example “Message Sent!” or “Invalid Password”.

How they work:

The Base Class: Every alert starts with .alert.
The Color Class: You add a contextual class (like .alert-success) to give it meaning through color.

Common Alert Types:

Class	Color	Meaning
`.alert-success`	Green	Everything went well (e.g., “Saved!”).
`.alert-danger`	Red	Something went wrong (e.g., “Error!”).
`.alert-warning`	Yellow	Be careful (e.g., “Session expiring”).
`.alert-info`	Blue	General information (e.g., “New update available”).

Cool Features:

Dismissible Alerts: Provide a “close” button so the user may clear the message once he has read it. (For example, a back-to-application link).
Links:To insert a link within an alert use the .alert-link class to match the color up with the box completely.

2. Badges: The “Labels”

Badges are small, rounded indicators. Most often, they are used as counters (such as ‘unread messages’) or small labels (such as ‘New’, ‘Hot’)

How they work:

The Base Class: Use .badge.
The Color Class: Just like alerts, use .text-bg-success or .text-bg-primary to color them.

Where to use them:

Inside Buttons: Perfect for showing a notification count: Notifications <span class="badge text-bg-secondary">4</span>.
Pill Shape: If you want them to look like a medicine pill (extra rounded), add the .rounded-pill class.

Simple Summary Table

Feature	Alerts	Badges
Size	Large (usually spans the width)	Small (usually sits next to text)
Purpose	To give feedback or warnings	To label or count things
Interaction	Can be dismissed (closed)	Usually static (just for display)

Example Code Snippet:

HTML

<div class="alert alert-success" role="alert">
  Your profile has been updated!
</div>

<h1>New Features <span class="badge bg-primary">New</span></h1>