Background color
Set the background of an element using the background-color attribute.
Set the text color using the text-color attribute with a contrast-* value to display the optimal text color.
Light Mode
Dark Mode
primary
primary-subtle
secondary
secondary-subtle
success
success-subtle
danger
danger-subtle
warning
warning-subtle
info
info-subtle
light
dark
dark-subtle
body-secondary
body-tertiary
body
white
transparent
primary
primary-subtle
secondary
secondary-subtle
success
success-subtle
danger
danger-subtle
warning
warning-subtle
info
info-subtle
light
dark
dark-subtle
body-secondary
body-tertiary
body
white
transparent
vue
<template>
<Row text-alignment="center">
<Col><h5>Light Mode</h5></Col>
<Col><h5>Dark Mode</h5></Col>
</Row>
<Row>
<Col theme="light">
<b-div
padding="3"
margin="b-2"
background-color="primary"
text-color="contrast-primary"
>
primary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="primary-subtle"
text-color="primary-emphasis"
>
primary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary"
text-color="contrast-secondary"
>
secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary-subtle"
text-color="secondary-emphasis"
>
secondary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success"
text-color="contrast-success"
>
success
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success-subtle"
text-color="success-emphasis"
>
success-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger"
text-color="contrast-danger"
>
danger
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger-subtle"
text-color="danger-emphasis"
>
danger-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning"
text-color="contrast-warning"
>
warning
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning-subtle"
text-color="warning-emphasis"
>
warning-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info"
text-color="contrast-info"
>
info
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info-subtle"
text-color="info-emphasis"
>
info-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="light"
text-color="contrast-light"
>
light
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark"
text-color="contrast-dark"
>
dark
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark-subtle"
text-color="dark-emphasis"
>
dark-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-secondary"
text-color="dark-emphasis"
>
body-secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-tertiary"
text-color="dark-emphasis"
>
body-tertiary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body"
text-color="dark-emphasis"
>
body
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="white"
text-color="dark"
>
white
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="transparent"
text-color="text-body"
>
transparent
</b-div>
</Col>
<Col theme="dark">
<b-div
padding="3"
margin="b-2"
background-color="primary"
text-color="contrast-primary"
>
primary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="primary-subtle"
text-color="primary-emphasis"
>
primary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary"
text-color="contrast-secondary"
>
secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary-subtle"
text-color="secondary-emphasis"
>
secondary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success"
text-color="contrast-success"
>
success
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success-subtle"
text-color="success-emphasis"
>
success-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger"
text-color="contrast-danger"
>
danger
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger-subtle"
text-color="danger-emphasis"
>
danger-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning"
text-color="contrast-warning"
>
warning
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning-subtle"
text-color="warning-emphasis"
>
warning-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info"
text-color="contrast-info"
>
info
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info-subtle"
text-color="info-emphasis"
>
info-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="light"
text-color="contrast-light"
>
light
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark"
text-color="contrast-dark"
>
dark
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark-subtle"
text-color="dark-emphasis"
>
dark-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-secondary"
text-color="dark-emphasis"
>
body-secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-tertiary"
text-color="dark-emphasis"
>
body-tertiary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body"
text-color="dark-emphasis"
>
body
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="white"
text-color="dark"
>
white
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="transparent"
text-color="text-body"
>
transparent
</b-div>
</Col>
</Row>
</template>
Background gradient
By adding a background-gradient attribute, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom.
primary
primary-subtle
secondary
secondary-subtle
success
success-subtle
danger
danger-subtle
warning
warning-subtle
info
info-subtle
light
dark
dark-subtle
body-secondary
body-tertiary
vue
<template>
<b-div
padding="3"
margin="b-2"
background-color="primary"
text-color="contrast-primary"
background-gradient
>
primary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="primary-subtle"
text-color="primary-emphasis"
background-gradient
>
primary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary"
text-color="contrast-secondary"
background-gradient
>
secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary-subtle"
text-color="secondary-emphasis"
background-gradient
>
secondary-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success"
text-color="contrast-success"
background-gradient
>
success
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success-subtle"
text-color="success-emphasis"
background-gradient
>
success-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger"
text-color="contrast-danger"
background-gradient
>
danger
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger-subtle"
text-color="danger-emphasis"
background-gradient
>
danger-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning"
text-color="contrast-warning"
background-gradient
>
warning
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning-subtle"
text-color="warning-emphasis"
background-gradient
>
warning-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info"
text-color="contrast-info"
background-gradient
>
info
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info-subtle"
text-color="info-emphasis"
background-gradient
>
info-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="light"
text-color="bg-light"
background-gradient
>
light
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark"
text-color="bg-dark"
background-gradient
>
dark
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark-subtle"
text-color="dark-emphasis"
background-gradient
>
dark-subtle
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-secondary"
background-gradient
>
body-secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body-tertiary"
background-gradient
>
body-tertiary
</b-div>
</template>
Custom gradient
Green
vue
<template>
<b-div
padding="3"
margin="b-2"
class="un-text-contrast-green un-bg-gradient-to-r un-from-green-500 un-to-yellow-500"
>
Green
</b-div>
</template>
Opacity
This allows for real-time color changes and dynamic alpha transparency changes.
Choose from any of the background-opacity attribute:
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
vue
<template>
<b-div
padding="2"
background-color="success"
text-color="white"
>
This is default success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="white"
background-opacity="75"
>
This is 75% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="dark"
background-opacity="50"
>
This is 50% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="dark"
background-opacity="25"
>
This is 25% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="dark"
background-opacity="10"
>
This is 10% opacity success background
</b-div>
</template>
To change that opacity, set a numerical value for background-opacity.
This is default success background
This is 90% opacity success background
This is 80% opacity success background
This is 70% opacity success background
This is 60% opacity success background
This is 50% opacity success background
This is 40% opacity success background
This is 30% opacity success background
This is 20% opacity success background
This is 10% opacity success background
vue
<template>
<b-div
padding="2"
background-color="success"
text-color="white"
>
This is default success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="white"
:background-opacity="0.9"
>
This is 90% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="white"
:background-opacity="0.8"
>
This is 80% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="white"
:background-opacity="0.7"
>
This is 70% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
text-color="white"
:background-opacity="0.6"
>
This is 60% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
:background-opacity="0.5"
>
This is 50% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
:background-opacity="0.4"
>
This is 40% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
:background-opacity="0.3"
>
This is 30% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
:background-opacity="0.2"
>
This is 20% opacity success background
</b-div>
<b-div
padding="2"
background-color="success"
:background-opacity="0.1"
>
This is 10% opacity success background
</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