Colors
Colorize text with color utilities. If you want to colorize links, you can use the link helper attributes which have :hover and :focus states.
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
vue
<template>
<Row text-alignment="center">
<Col><h5>Light Mode</h5></Col>
<Col><h5>Dark Mode</h5></Col>
</Row>
<Row>
<Col
theme="light"
background-color="light"
>
<b-p text-color="primary">
primary
</b-p>
<b-p text-color="primary-emphasis">
primary-emphasis
</b-p>
<b-p text-color="secondary">
secondary
</b-p>
<b-p text-color="secondary-emphasis">
secondary-emphasis
</b-p>
<b-p text-color="success">
success
</b-p>
<b-p text-color="success-emphasis">
success-emphasis
</b-p>
<b-p text-color="danger">
danger
</b-p>
<b-p text-color="danger-emphasis">
danger-emphasis
</b-p>
<b-p
text-color="warning"
background-color="dark"
>
warning
</b-p>
<b-p text-color="warning-emphasis">
warning-emphasis
</b-p>
<b-p
text-color="info"
background-color="dark"
>
info
</b-p>
<b-p text-color="info-emphasis">
info-emphasis
</b-p>
<b-p
text-color="light"
background-color="dark"
>
light
</b-p>
<b-p text-color="light-emphasis">
light-emphasis
</b-p>
<b-p text-color="dark">
dark
</b-p>
<b-p text-color="dark-emphasis">
dark-emphasis
</b-p>
<b-p text-color="body">
body
</b-p>
<b-p text-color="body-emphasis">
body-emphasis
</b-p>
<b-p text-color="body-secondary">
body-secondary
</b-p>
<b-p text-color="body-tertiary">
body-tertiary
</b-p>
<b-p text-color="black">
black
</b-p>
<b-p
text-color="white"
background-color="dark"
>
white
</b-p>
<b-p text-color="black-50">
black-50
</b-p>
<b-p
text-color="white-50"
background-color="dark"
>
white-50
</b-p>
</Col>
<Col
theme="dark"
background-color="dark"
>
<b-p text-color="primary">
primary
</b-p>
<b-p text-color="primary-emphasis">
primary-emphasis
</b-p>
<b-p text-color="secondary">
secondary
</b-p>
<b-p text-color="secondary-emphasis">
secondary-emphasis
</b-p>
<b-p text-color="success">
success
</b-p>
<b-p text-color="success-emphasis">
success-emphasis
</b-p>
<b-p text-color="danger">
danger
</b-p>
<b-p text-color="danger-emphasis">
danger-emphasis
</b-p>
<b-p
text-color="warning"
background-color="dark"
>
warning
</b-p>
<b-p text-color="warning-emphasis">
warning-emphasis
</b-p>
<b-p
text-color="info"
background-color="dark"
>
info
</b-p>
<b-p text-color="info-emphasis">
info-emphasis
</b-p>
<b-p
text-color="light"
background-color="dark"
>
light
</b-p>
<b-p text-color="light-emphasis">
light-emphasis
</b-p>
<b-p text-color="dark">
dark
</b-p>
<b-p text-color="dark-emphasis">
dark-emphasis
</b-p>
<b-p text-color="body">
body
</b-p>
<b-p text-color="body-emphasis">
body-emphasis
</b-p>
<b-p text-color="body-secondary">
body-secondary
</b-p>
<b-p text-color="body-tertiary">
body-tertiary
</b-p>
<b-p text-color="black">
black
</b-p>
<b-p
text-color="white"
background-color="dark"
>
white
</b-p>
<b-p text-color="black-50">
black-50
</b-p>
<b-p
text-color="white-50"
background-color="dark"
>
white-50
</b-p>
</Col>
</Row>
</template>
Opacity
This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text
vue
<template>
<b-div text-color="primary">
This is default primary text
</b-div>
<b-div
text-color="primary"
text-opacity="75"
>
This is 75% opacity primary text
</b-div>
<b-div
text-color="primary"
text-opacity="50"
>
This is 50% opacity primary text
</b-div>
<b-div
text-color="primary"
text-opacity="25"
>
This is 25% opacity primary text
</b-div>
</template>
Extend
Extend color
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