Alerts & Badges
Bootstrap Alerts
Alerts គឺជា components សម្រាប់បង្ហាញ feedback messages ដល់ users ដូចជា success, warning, error, និង informational messages។
🎨 Alert Types & Colors
| Class | Color | Use Case | Example Message |
|---|---|---|---|
alert-primary |
Blue | General information | Important system update available |
alert-secondary |
Gray | Secondary information | Additional details... |
alert-success |
Green | Success messages | ✓ Data saved successfully! |
alert-danger |
Red | Errors, critical issues | ✗ Error: Invalid credentials |
alert-warning |
Yellow/Orange | Warnings, cautions | ⚠ Warning: Low disk space |
alert-info |
Light Blue | Informational messages | ℹ New features available |
alert-light |
Light Gray | Subtle notifications | Tip: Use keyboard shortcuts |
alert-dark |
Dark Gray | Dark theme alerts | System maintenance scheduled |
🔧 Alert Features
| Feature | Class/Attribute | Description | HTML Example |
|---|---|---|---|
| Basic Alert | alert alert-{type} |
Standard alert box | <div class="alert alert-success"> |
| Dismissible | alert-dismissible fade show |
Alert with close button | <div class="alert alert-warning alert-dismissible"> |
| Alert Heading | alert-heading |
Styled heading in alert | <h4 class="alert-heading">Well done!</h4> |
| Alert Link | alert-link |
Matching color links | <a href="#" class="alert-link">Link</a> |
| Close Button | btn-close |
Dismiss button | <button class="btn-close" data-bs-dismiss="alert"> |
📋 Alert Structure Pattern
| Component | Required? | Purpose |
|---|---|---|
<div class="alert"> |
✅ Required | Alert container |
alert-{type} |
✅ Required | Color/context (success, danger, etc.) |
alert-dismissible |
⭕ Optional | Enable dismissal functionality |
fade show |
⭕ Optional | Fade transition on dismiss |
role="alert" |
⭕ Recommended | Accessibility (screen readers) |
Badges
Badges គឺជា small count និង labeling components ដែលប្រើសម្រាប់បង្ហាញ notifications, counts, status labels។
🏷️ Badge Types
| Class | Style | Use Case | Example |
|---|---|---|---|
badge bg-primary |
Blue background | General labels | New |
badge bg-success |
Green background | Active status | Active |
badge bg-danger |
Red background | Alerts, errors | 99+ |
badge bg-warning |
Yellow background | Warnings | Pending |
badge bg-info |
Light blue background | Information | Info |
badge bg-secondary |
Gray background | Secondary info | Draft |
badge bg-dark |
Dark background | Dark theme | Pro |
badge bg-light text-dark |
Light background | Subtle labels | Tag |
💊 Badge Variations
| Variation | Class | Visual Effect | Use Case |
|---|---|---|---|
| Standard Badge | badge bg-{color} |
Rounded rectangle | Default labels |
| Pill Badge | badge rounded-pill bg-{color} |
Fully rounded (pill shape) | Notification counts, tags |
| Positioned Badge | position-absolute top-0 start-100 |
Floating on element | Notification indicators on icons |
| Badge in Button | <button>Text <span class="badge"> |
Badge inside button | Show counts in buttons |
| Badge in Heading | <h1>Title <span class="badge"> |
Badge with heading | Labels in titles |
🎯 Common Badge Use Cases
| Use Case | Example HTML | Visual Result |
|---|---|---|
| Notification Count | Messages <span class="badge bg-danger">5</span> |
Messages 5 |
| Status Label | <span class="badge bg-success">Active</span> |
Active |
| Category Tag | <span class="badge rounded-pill bg-info">Tech</span> |
Tech |
Toasts & Progress Bars
Toasts សម្រាប់ temporary notifications និង Progress Bars សម្រាប់បង្ហាញ progress។
🍞 Toast Notifications
| Feature | Class/Attribute | Description |
|---|---|---|
| Toast Container | toast |
Main toast element |
| Toast Header | toast-header |
Header with title and close button |
| Toast Body | toast-body |
Main content area |
| Auto-hide | data-bs-autohide="true" |
Automatically dismiss after delay |
| Delay Time | data-bs-delay="5000" |
Milliseconds before auto-hide (5000 = 5 seconds) |
📊 Progress Bars
| Type | Classes | Description |
|---|---|---|
| Basic Progress | progress + progress-bar |
Standard progress bar |
| Colored Progress | progress-bar bg-{color} |
Success (green), danger (red), warning (yellow), etc. |
| Striped Progress | progress-bar-striped |
Diagonal stripes pattern |
| Animated Striped | progress-bar-striped progress-bar-animated |
Animated moving stripes |
| Multiple Bars | Multiple progress-bar in one progress |
Stacked progress segments |
| With Label | Text inside progress-bar |
Show percentage or text |
🎯 Progress Bar Sizing
| Height | Inline Style | Use Case |
|---|---|---|
| Thin | style="height: 5px;" |
Subtle progress indicators |
| Default | No style needed (16px) | Standard progress bars |
| Large | style="height: 30px;" |
Prominent progress with labels |