Background
Convey meaning through background-color and add decoration with gradients.
Theme colors
.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-light .bg-dark Gray shades
.bg-1100 .bg-1000 .bg-900 .bg-800 .bg-700 .bg-600 .bg-500 .bg-400 .bg-300 .bg-200 .bg-100 Background Gradient
By adding a .bg-gradient class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.
.bg-gradient.bg-primary
.bg-gradient.bg-secondary
.bg-gradient.bg-success
.bg-gradient.bg-info
.bg-gradient.bg-warning
.bg-gradient.bg-danger
.bg-gradient.bg-light
.bg-gradient.bg-dark
Subtle colors
.bg-primary-subtle.bg-secondary-subtle.bg-success-subtle.bg-info-subtle.bg-warning-subtle.bg-danger-subtle.bg-light-subtle.bg-dark-subtleColor and background
.text-bg-primary.text-bg-secondary.text-bg-success.text-bg-info.text-bg-warning.text-bg-danger.text-bg-light.text-bg-dark
