Set a background color with contrasting foreground color.
<template>
<b-div
text-background="primary"
padding="3"
>
Primary with contrasting color
</b-div>
<b-div
text-background="secondary"
padding="3"
>
Secondary with contrasting color
</b-div>
<b-div
text-background="success"
padding="3"
>
Success with contrasting color
</b-div>
<b-div
text-background="danger"
padding="3"
>
Danger with contrasting color
</b-div>
<b-div
text-background="warning"
padding="3"
>
Warning with contrasting color
</b-div>
<b-div
text-background="info"
padding="3"
>
Info with contrasting color
</b-div>
<b-div
text-background="light"
padding="3"
>
Light with contrasting color
</b-div>
<b-div
text-background="dark"
padding="3"
>
Dark with contrasting color
</b-div>
</template>
<template>
<Badge text-background="primary">
Primary
</Badge>
<Badge text-background="info">
Info
</Badge>
</template>
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<template>
<Card
text-background="primary"
margin="b-3"
style="max-width: 18rem;"
>
<CardHeader>Header</CardHeader>
<CardBody>
<CardText>
Some quick example text to build on the card title and make up the bulk of the card's content.
</CardText>
</CardBody>
</Card>
<Card
text-background="info"
margin="b-3"
style="max-width: 18rem;"
>
<CardHeader>Header</CardHeader>
<CardBody>
<CardText>
Some quick example text to build on the card title and make up the bulk of the card's content.
</CardText>
</CardBody>
</Card>
</template>