Colors

Customizing Colors

slate
Gray
Zinc
Neutral
Stone
Red
Amber
Orange
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose

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

Gradient Colors :

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-info

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

Dark Gradient Colors :

.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

SVG Background with color :
.bg-temple-dark
.bg-food-dark
.bg-brick-dark
.bg-bubbles-dark
SVG Background with Transparent color :
.bg-temple-white
.bg-food-white
.bg-brick-white
.bg-bubbles-white

Border colors

.border-* can apply to any element, where * is a color name.

Default color
.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-dark
.border-white
.border-light
.border-transparent

Text colors

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.

.text-primary
.text-secondary
.text-success
.text-info
.text-warning
.text-danger
.text-dark
.text-mute
.text-light
.text-lighter
.text-fade
.text-white
Hover colors :

.hover-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.

Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?