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
- Cards > Background And Color
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
Theme
Use dark mode, light mode, or your own theme color partially.
Light Mode
Dark Mode
<template>
<Row text-alignment="center">
<Col><h5>Light Mode</h5></Col>
<Col><h5>Dark Mode</h5></Col>
</Row>
<Row>
<Col
theme="light"
text-alignment="center"
>
<Dropdown>
<DropdownToggle color="secondary">
Dropdown button
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/">
Action
</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<Col
theme="dark"
text-alignment="center"
>
<Dropdown>
<DropdownToggle color="secondary">
Dropdown button
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/">
Action
</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
</Row>
</template>
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
primary
primary-emphasis
secondary
secondary-emphasis
success
success-emphasis
danger
danger-emphasis
warning
warning-emphasis
info
info-emphasis
light
light-emphasis
dark
dark-emphasis
body
body-emphasis
body-secondary
body-tertiary
black
white
black-50
white-50
primary
primary-emphasis
secondary
secondary-emphasis
success
success-emphasis
danger
danger-emphasis
warning
warning-emphasis
info
info-emphasis
light
light-emphasis
dark
dark-emphasis
body
body-emphasis
body-secondary
body-tertiary
black
white
black-50
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.