Bootstrap provides background color utility classes like <.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light> to easily apply various background colors.
| Class | Description |
|---|---|
.bg-primary |
Main theme background color (usually blue) |
.bg-success |
Indicates success (usually green background) |
.bg-info |
Used for informational background (light blue) |
.bg-warning |
Warning or alert background (yellow/orange) |
.bg-danger |
Error or danger background (usually red) |
.bg-secondary |
Secondary or neutral background (gray) |
.bg-dark |
Dark background (black or dark gray) |
.bg-light |
Light background (off-white or very light gray) |
The .bg-color classes mentioned above may not provide good readability with default text, so it's important to pair them with a suitable .text-color class for proper contrast.
Alternatively, you can use .text-bg-* classes, and Bootstrap will automatically apply the correct text color based on the background for better readability.