Colors

  1. Bootstrap
  2. Colors

Contextual Colors

#6c5ffc

Primary

.bg-primary

#1170e4

Info

.bg-info

#05c3fb

Secondary

.bg-secondary

#f7b731

Warning

.bg-warning

#e82646

Danger

.bg-danger

#09ad95

Success

.bg-success

Transparent Colors

rgba(108, 95, 252, 0.1)

Primary

.bg-primary-transparent

rgba(5, 195, 251, 0.1)

Secondary

.bg-secondary-transparent

rgba(0, 230, 130, 0.1)

Success

.bg-success-transparent

rgba(255, 162, 43, 0.1)

Warning

.bg-warning-transparent

rgba(255, 56, 43, 0.1)

Danger

.bg-danger-transparent

#09ad95

Info

.bg-info-transparent

Gradient Colors

.bg-primary-gradient

Primary

.bg-secondary-gradient

Secondary

.bg-success-gradient

Success

.bg-warning-gradient

Warning

.bg-danger-gradient

Danger

.bg-info-gradient

Info

Class Reference Values
class="bg-primary-gradient" linear-gradient(to bottom right, #6c5ffc 0%, #8e77fa 100%)
class="bg-secondary-gradient" linear-gradient(to bottom right, #82cff2 0%, #28b7f9 100%)
class="bg-success-gradient" linear-gradient(to bottom right, #1ea38f 0%, #5cf9e2 100%)
class="bg-warning-gradient" linear-gradient(to bottom right, #f66b4e 0%, #fbc434 100%)
class="bg-danger-gradient" linear-gradient(to bottom right, #b51b35 0%, #fd4a68 100%)
class="bg-info-gradient" linear-gradient(to bottom right, #1e63c3 0%, #00f2fe 100%)

Other Colors

#3223f1

Blue

.bg-blue

#1caf9f

Teal

.bg-teal

#45aaf2

Azure

.bg-azure

#fc7303

Orange

.bg-orange

#007ea7

Cyan

.bg-cyan

#FBB034

Yellow

.bg-yellow

#5a6970

Gray

.bg-gray

#8927ec

Purple

.bg-purple

#7bd235

Lime

.bg-lime

#343a40

Gray-dark

.bg-gray-dark

#4ecc48

Green

.bg-green

#fc5296

Pink

.bg-pink

#05c3fb

Secondary

.bg-secondary

#e73827

Red

.bg-red

#6574cd

Indigo

.bg-indigo