Colors

  1. Utilities
  2. Colors
Background Colors

.bg-primary

.bg-secondary

.bg-warning

.bg-info

.bg-success

.bg-danger

.bg-light

.bg-dark

Background gradients

.bg-primary-gradient

.bg-secondary-gradient

.bg-warning-gradient

.bg-info-gradient

.bg-success-gradient

.bg-danger-gradient

.bg-light-gradient

.bg-dark-gradient

Background transparent colors

.bg-primary-transparent

.bg-secondary-transparent

.bg-warning-transparent

.bg-info-transparent

.bg-success-transparent

.bg-danger-transparent

.bg-light-transparent

.bg-dark-transparent

Background outline colors

.bg-outline-primary

.bg-outline-secondary

.bg-outline-warning

.bg-outline-info

.bg-outline-success

.bg-outline-danger

.bg-outline-light

.bg-outline-dark

Border Colors

.border-primary

.border-secondary

.border-warning

.border-info

.border-success

.border-danger

.border-light

.border-dark

Background Opacity
100%

.bg-opacity-75

75%

.bg-opacity-75

50%

.bg-opacity-50

25%

.bg-opacity-25

10%

.bg-opacity-10

Text Colors
primary

.text-primary

secondary

.text-secondary

warning

.text-warning

info

.text-info

success

.text-success

danger

.text-danger

light

.text-light

dark

.text-dark

muted

.text-muted

Text Opacity
Opacity-100

100% opacity

Opacity-100

.text-opacity-75

Opacity-100

.text-opacity-50

Opacity-100

.text-opacity-25

Callout
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Other Colors:
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$blue
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$indigo
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$purple
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$pink
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$red
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$orange
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$yellow
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$green
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$teal
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$cyan
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$gray