Attributes
This section explains the color attributes in use-bootstrap components.
Color
This changes the background color, text color, and border color of the component all at once.
It can be set for some components.
<template>
<Alert color="info">
A simple info
</Alert>
<Dropdown>
<DropdownToggle color="primary-subtle">
primary-subtle
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<Badge
color="green-100"
padding="3"
margin="y-3"
>
green-100
</Badge>
</template>
See Also
Text and Background
This changes the background color and text color of the component all at once.
<template>
<b-div
text-background="primary"
padding="3"
margin="b-3"
>
primary
</b-div>
<b-div
text-background="primary-subtle"
padding="3"
margin="b-3"
>
primary-subtle
</b-div>
<b-div
text-background="cyan-100"
padding="3"
margin="b-3"
>
cyan-100
</b-div>
</template>
See Also
Text Color
This sets the color of the text within the component.
<template>
<b-div
text-color="primary"
padding="3"
margin="b-3"
>
primary
</b-div>
<Spinner text-color="success" />
</template>
See Also
Background Color
This sets the background color of the component.
<template>
<b-div
background-color="primary"
text-color="light"
padding="3"
margin="b-3"
>
primary
</b-div>
</template>
See Also
Border Color
This sets the color of the border of the component.
See Also
Colors
Bootstrap 5 Theme Colors
The theme colors in Bootstrap can be customized using Sass .
Light Mode
Dark Mode
Subtle Theme Colors
The subtle theme colors are compatible with dark mode.
Light Mode
Dark Mode
Body colors
The body theme colors are compatible with dark mode.
Light Mode
Dark Mode
Text colors
Use text colors according to the background color.
Light Mode
Dark Mode
.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-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
.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-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
Extend Color
All
use-bootstrap features a color generator that dynamically sets the specified colors in styles.
The text color is automatically selected based on high contrast colors. Override the settings as needed.