Nearby lessons
6 of 39🎨 BS5 Colors
📌 What Is the Bootstrap 5 Color System?
Bootstrap provides theme colors (primary, secondary, success, danger, warning, info, light, dark) and utilities. Use .text-{color} for text (e.g. .text-primary), .bg-{color} for backgrounds (e.g. .bg-success), and .border-{color} for borders.
🎨 Theme Colors
Theme colors: primary (blue), secondary (gray), success (green), danger (red), warning (yellow), info (cyan), light (light gray), dark (dark gray). Use with .text-*, .bg-*, or .border-*.
📝 Text Colors (.text-primary, .text-success, .text-muted)
.text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-muted, .text-dark, .text-light – set text color. Use .text-dark or .text-white on colored backgrounds for contrast.
🎨 Background Colors (.bg-primary, .bg-success, etc.)
.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark – set background color. Pair with .text-white or .text-dark for readable text.
📐 Border Colors (.border-primary, .border-success)
.border – adds a border. .border-primary, .border-success, .border-danger, etc. – colored borders. Use with .border.
✅ Color Best Practices
- Match colors to meaning: success for positive, danger for errors, etc.
- Ensure contrast: use .text-white on dark backgrounds, .text-dark on light.
- Use .text-muted for secondary/helper text.