Colors
Colors Options
Use diffrent color style to color your element
with a given table.
| Colors | Background Gradient | Background Color | Background Soft | Border Colors | Text Colors | |||||
|---|---|---|---|---|---|---|---|---|---|---|
| Primary | .bg-gradient | .bg-primary | .bg-primary-subtle | .border-primary | .text-primary | text-primary | ||||
| Secondary | .bg-gradient | .bg-secondary | .bg-secondary-subtle | .border-secondary | .text-secondary | text-secondary | ||||
| Success | .bg-gradient | .bg-success | .bg-success-subtle | .border-success | .text-success | text-success | ||||
| Info | .bg-gradient | .bg-info | .bg-info-subtle | .border-info | .text-info | text-info | ||||
| Warning | .bg-gradient | .bg-warning | .bg-warning-subtle | .border-warning | .text-warning | text-warning | ||||
| Danger | .bg-gradient | .bg-danger | .bg-danger-subtle | .border-danger | .text-danger | text-danger | ||||
| Dark | .bg-gradient | .bg-dark | .bg-dark-subtle | .border-dark | .text-dark | text-dark | ||||
| Light | .bg-gradient | .bg-light | .bg-light-subtle | .border-light | .text-light | text-light | ||||
| Body | - | - | .bg-body | - | - | - | - | .text-body | text-body | |
| Body Secondary | - | - | .bg-body-secondary | - | - | - | - | .text-body-secondary | text-body-secondary | |
| Body Tertiary | - | - | .bg-body-tertiary | - | - | - | - | .text-body-tertiary | text-body-tertiary | |
| Body Emphasis | - | - | - | - | - | - | - | - | .text-body-emphasis | text-body-emphasis |
| Muted | - | - | - | - | - | - | - | - | .text-muted | text-muted |
| White | - | - | - | - | - | - | - | - | .text-white | text-white |
| White-50 | - | - | - | - | - | - | - | - | .text-white-50 | text-white-50 |
| Black-50 | - | - | - | - | - | - | - | - | .text-black-50 | text-black-50 |
| Opacity-10 | - | - | .bg-opacity-10 | - | - | .border-opacity-10 | - | - | ||
| Opacity-25 | .opacity-25 | .bg-opacity-25 | - | - | .border-opacity-25 | .text-opacity-25 | text-opacity-25 | |||
| Opacity-50 | .opacity-50 | .bg-opacity-50 | - | - | .border-opacity-50 | .text-opacity-50 | text-opacity-50 | |||
| Opacity-75 | .opacity-75 | .bg-opacity-75 | - | - | .border-opacity-75 | .text-opacity-75 | text-opacity-75 | |||
| Opacity-100 | .opacity-100 | .bg-opacity-100 | - | - | .border-opacity-100 | .text-opacity-100 | text-opacity-100 | |||
Colors Emphasis
.text-primary-emphasis | text-primary-emphasis |
.text-secondary-emphasis | text-secondary-emphasis |
.text-success-emphasis | text-success-emphasis |
.text-info-emphasis | text-info-emphasis |
.text-warning-emphasis | text-warning-emphasis |
.text-danger-emphasis | text-danger-emphasis |
.text-dark-emphasis | text-dark-emphasis |
.text-light-emphasis | text-light-emphasis |