Color management

use-bootstrap is supported by an extensive color system of styles and component themes.

On this page

Bootstrap5

Theme

The theme colors in Bootstrap can be customized using Sass.

primary
secondary
success
danger
warning
info

Subtle theme

The Subtle theme colors are compatible with dark mode.

primary-subtle
secondary-subtle
success-subtle
danger-subtle
warning-subtle
info-subtle
dark-subtle

Body theme

The Body theme colors are compatible with dark mode.

light
dark
body-secondary
body-tertiary
body
white
transparent

Text

Use text colors according to the background color.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

Extend

All

use-bootstrap features a color generator that dynamically sets the specified colors in styles.

Please add thecolor-generate attribute to the component to use it.

The text color is automatically selected based on high contrast colors. Override the settings as needed.

blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
indigo
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
purple
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
pink
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
red
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
orange
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
teal
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
cyan
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
On this page