Colors and Backgrounds
Bootstrap\'s contextual colors let interfaces communicate states such as success, warning, danger, information, and emphasis using consistent class names.
Core concept
Explain text color utilities, background utilities, text-bg classes, subtle contextual backgrounds, link colors, and opacity. Distinguish a visual color choice from semantic meaning so developers do not treat every color as decoration.
Using it in a real interface
Use success for successful outcomes, danger for destructive or invalid states, warning for caution, and neutral styles for ordinary content. Always provide text or icons when the state matters so color is not the only signal.
Implementation notes
Check contrast whenever custom colors are introduced. A visually attractive combination can still make body text, links, disabled-looking controls, or badges difficult to read.