Color management

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

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