Colors
Bootstrap Color System
Bootstrap ផ្តល់នូវ color utility classes ជាច្រើនសម្រាប់ text, background, និង border។ Bootstrap 5 ប្រើ semantic color palette ដែលផ្តល់អត្ថន័យនិងស្ថិរភាពទូទាំង design system។
🎨 Bootstrap Color Palette
| Color Name | Purpose/Meaning | Common Use Cases | Classes |
|---|---|---|---|
| Primary 🔵 | Main brand color | Buttons, links, active states | text-primary bg-primary border-primary |
| Secondary ⚪ | Supporting color | Less prominent buttons, text | text-secondary bg-secondary border-secondary |
| Success ✅ | Positive actions/states | Success messages, confirmations | text-success bg-success border-success |
| Danger ❌ | Errors/destructive actions | Error messages, delete buttons | text-danger bg-danger border-danger |
| Warning ⚠️ | Caution/important info | Warnings, pending states | text-warning bg-warning border-warning |
| Info ℹ️ | Informational content | Tips, help messages | text-info bg-info border-info |
| Light ☀️ | Light backgrounds | Subtle backgrounds, separators | text-light bg-light border-light |
| Dark 🌙 | Dark backgrounds/text | Headers, footers, dark mode | text-dark bg-dark border-dark |
| Muted 🔇 | De-emphasized text | Captions, metadata, hints | text-muted |
| White | Pure white | Text on dark bg, white cards | text-white bg-white |
📝 Text Color Classes
| Class | Effect | Example Usage |
|---|---|---|
.text-primary |
Primary color text | <p class="text-primary">Important text</p> |
.text-success |
Green text (success) | <span class="text-success">✓ Complete</span> |
.text-danger |
Red text (error) | <p class="text-danger">Error message</p> |
.text-muted |
Lighter gray text | <small class="text-muted">Posted 2 hours ago</small> |
.text-white |
White text | <div class="bg-dark text-white">Dark bg</div> |
.text-body |
Default body text color | <p class="text-body">Normal text</p> |
Background Colors
Background color utilities ប្រើសម្រាប់ផ្លាស់ប្តូរពណ៌ផ្ទៃខាងក្រោយនៃ elements។
🖌️ Background Color Classes
| Class | Color | Best With | Example |
|---|---|---|---|
.bg-primary |
Blue (brand color) | text-white |
<div class="bg-primary text-white">...</div> |
.bg-success |
Green | text-white |
<div class="bg-success text-white">...</div> |
.bg-danger |
Red | text-white |
<div class="bg-danger text-white">...</div> |
.bg-warning |
Yellow | text-dark |
<div class="bg-warning text-dark">...</div> |
.bg-info |
Light blue | text-dark |
<div class="bg-info text-dark">...</div> |
.bg-light |
Light gray | text-dark |
<div class="bg-light text-dark">...</div> |
.bg-dark |
Dark gray | text-white |
<div class="bg-dark text-white">...</div> |
.bg-white |
White | text-dark |
<div class="bg-white text-dark">...</div> |
.bg-transparent |
Transparent | Any | <div class="bg-transparent">...</div> |
🌈 Background Gradient
| Feature | Class | Description |
|---|---|---|
| Gradient Effect | .bg-gradient |
Add to any bg-* class to create gradient |
| Usage | .bg-primary .bg-gradient |
Combines background color with gradient overlay |
| Example | Multiple classes | <div class="bg-success bg-gradient"> creates green gradient |
Text Colors & Opacity
Bootstrap 5 ណែនាំ opacity utilities ដែលអនុញ្ញាតឲ្យកំណត់កម្រិតថ្លានៃពណ៌។
🔆 Opacity Levels
| Class | Opacity | Use Case | Example |
|---|---|---|---|
.text-opacity-100 |
100% (default) | Fully visible text | <p class="text-primary"> |
.text-opacity-75 |
75% | Slightly faded | <p class="text-primary text-opacity-75"> |
.text-opacity-50 |
50% | Half transparent | <p class="text-danger text-opacity-50"> |
.text-opacity-25 |
25% | Very faded | <p class="text-success text-opacity-25"> |
.bg-opacity-100 |
100% | Solid background | <div class="bg-primary"> |
.bg-opacity-75 |
75% | Slightly see-through | <div class="bg-warning bg-opacity-75"> |
.bg-opacity-50 |
50% | Semi-transparent overlays | <div class="bg-dark bg-opacity-50"> |
.bg-opacity-25 |
25% | Subtle backgrounds | <div class="bg-info bg-opacity-25"> |
.bg-opacity-10 |
10% | Very subtle tint | <div class="bg-success bg-opacity-10"> |
🎨 Border Colors
| Border Class | Width Class | Result |
|---|---|---|
.border-primary |
.border-1 |
1px primary border |
.border-success |
.border-2 |
2px success border |
.border-danger |
.border-3 |
3px danger border (default) |
.border-warning |
.border-4 |
4px warning border |
.border-info |
.border-5 |
5px info border (thick) |
✅ Color Usage Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use semantic colors (success for positive, danger for negative) | Use random colors without meaning |
| Ensure good contrast (text-white on bg-dark) | Use low contrast combinations (text-light on bg-white) |
| Use opacity for subtle effects | Overuse opacity making text unreadable |
| Combine bg-{color} with appropriate text color | Forget to set text color on colored backgrounds |
| Use muted for less important text | Make all text muted |
| Test colors in both light and dark modes | Assume colors work everywhere |