Convey meaning through 'background-color' and add decoration with gradients.
Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color
, so in some cases you'll want to use background-color=
color utilities .
<template>
<b-div
padding="3"
margin="b-2"
background-color="primary"
text-color="white"
>
.bg-primary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary"
text-color="white"
>
.bg-secondary
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success"
text-color="white"
>
.bg-success
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger"
text-color="white"
>
.bg-danger
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning"
text-color="dark"
>
.bg-warning
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info"
text-color="dark"
>
.bg-info
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="light"
text-color="dark"
>
.bg-light
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark"
text-color="white"
>
.bg-dark
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="body"
text-color="dark"
>
.bg-body
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="white"
text-color="dark"
>
.bg-white
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="transparent"
text-color="dark"
>
.bg-transparent
</b-div>
</template>
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.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);
.
<template>
<b-div
padding="3"
margin="b-2"
background-color="primary"
text-color="white"
background-gradient
>
.bg-primary.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="secondary"
text-color="white"
background-gradient
>
.bg-secondary.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="success"
text-color="white"
background-gradient
>
.bg-success.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="danger"
text-color="white"
background-gradient
>
.bg-danger.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="warning"
text-color="dark"
background-gradient
>
.bg-warning.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="info"
text-color="dark"
background-gradient
class="p-3 mb-2 bg-info bg-gradient text-dark"
>
.bg-info.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="light"
text-color="dark"
background-gradient
>
.bg-light.bg-gradient
</b-div>
<b-div
padding="3"
margin="b-2"
background-color="dark"
text-color="white"
background-gradient
>
.bg-dark.bg-gradient
</b-div>
</template>
As of v5.1.0, background-color
utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
Consider our default background-color="success"
utility.
To change that opacity, override --bs-bg-opacity
via custom styles or inline styles.
<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"
style="--bs-bg-opacity: 0.5"
>
This is 50% opacity success background
</b-div>
</template>
Or, choose from any of the background-opacity
attribute:
<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>