Background

  1. Utilities
  2. Background
Contextual Colors

#4d65d9

Primary

.bg-primary

#f1388b

Secondary

.bg-secondary

#19b159

Success

.bg-success

#01b8ff

Info

.bg-info

#fd6074

Danger

.bg-danger

#ff9b21

Warning

.bg-warning

#00cccc

Teal

.bg-teal

#6f42c1

Purple

.bg-purple

#3b4863

Dark

.bg-dark

#f0f2f8

Light

.bg-light

#4b0082

Indigo

.bg-indigo

#007ea7

Azure

.bg-azure

Light Colors

rgba(68, 86, 195, 0.2)

Primary

.bg-primary-light

rgba(241, 56, 139, 0.2)

Secondary

.bg-secondary-light

rgba(25, 177, 89, 0.2)

Success

.bg-success-light

rgba(1, 184, 255, 0.2)

Info

.bg-info-light

rgba(253, 96, 116, 0.2)

Danger

.bg-danger-light

rgba(255, 155, 33, 0.2)

Warning

.bg-warning-light

Gradient Colors
Primary

.bg-primary-gradient

Secondary

.bg-secondary-gradient

Success

.bg-success-gradient

Info

.bg-info-gradient

Danger

.bg-danger-gradient

Warning

.bg-warning-gradient

Class Reference Values
class="bg-primary-gradient" linear-gradient(to right, #4d65d9 0%, #7789f7 100%)
class="bg-secondary-gradient" linear-gradient(to right, #f1388b 0%, #fb6dad 100%)
class="bg-success-gradient" linear-gradient(to right, #19b159 0%, #6cefa3 100%)
class="bg-info-gradient" linear-gradient(to right, #01b8ff 0%, #7edbff 100%)
class="bg-danger-gradient" linear-gradient(to right, #fd6074 0%, #f594a0 100%)
class="bg-warning-gradient" linear-gradient(to right, #ff9b21 0%, #f9c07b 100%)
Transparent Color Set
img
img
img
img
img
img
img
img
img
img
img
img
Transparent White Set

A set of overlay transparent white background utilities classes.

Class Reference Value
class="bg-white-[value]" 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Transparent Black Set

A set of overlay transparent black background utilities classes.

Class Reference Value
class="bg-black-[value]" 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9