Bootstrap 5 Colors
Text Colors
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .text-muted
,
.text-primary
, .text-success
, .text-info
,
.text-warning
, .text-danger
, .text-secondary
, .text-white
,
.text-dark
, .text-body
(default body color/often black) and .text-light
:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
You can also add 50% opacity for black or white text with the .text-black-50
or .text-white-50
classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Background Colors
The classes for background colors are: .bg-primary
,
.bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
.
The .bg-color
classes above does not work well with text, or atleast then you
have to specify a proper .text-color
class to get the right text color for each
background.
However, you can use the
.text-bg-color
classes and Bootstrap will automatically handle the appropriate
text color for each background color:
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.