Customizing Colors
Primary Background Colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
Primary light Background Colors
.bg-primary-light
.bg-secondary-light
.bg-success-light
.bg-danger-light
.bg-warning-light
.bg-info-light
Hover Background Colors
Use custom
.bg-hover-{color}class to set a hover background color:
Bootstrap Background Colors
.bg-light
.bg-dark
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900
.bg-white
.bg-transparent
Gradient colors
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-info
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-primary-dark
.bg-gradient-secondary-dark
.bg-gradient-info-dark
.bg-gradient-success-dark
.bg-gradient-danger-dark
.bg-gradient-warning-dark
SVG Img Background
Border colors
.border-* can apply to any element, where * is a color name.
Text colors
.text-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.
.hover-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.
