Convey meaning through 'color' with a handful of color utility classes. Includes support for styling links with hover states, too.
Colorize text with color utilities. If you want to colorize links, you can use the link helper attributes which have :hover
and :focus
states.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
<template>
<b-p text-color="primary">
.text-primary
</b-p>
<b-p text-color="secondary">
.text-secondary
</b-p>
<b-p text-color="success">
.text-success
</b-p>
<b-p text-color="danger">
.text-danger
</b-p>
<b-p
text-color="warning"
background-color="dark"
>
.text-warning
</b-p>
<b-p
text-color="info"
background-color="dark"
>
.text-info
</b-p>
<b-p
text-color="light"
background-color="dark"
>
.text-light
</b-p>
<b-p text-color="dark">
.text-dark
</b-p>
<b-p text-color="body">
.text-body
</b-p>
<b-p text-color="muted">
.text-muted
</b-p>
<b-p
text-color="white"
background-color="dark"
>
.text-white
</b-p>
<b-p text-color="black-50">
.text-black-50
</b-p>
<b-p
text-color="white-50"
background-color="dark"
>
.text-white-50
</b-p>
</template>
<template>
<b-div text-color="primary">
This is default primary text
</b-div>
<b-div
text-color="primary"
:opacity="75"
>
This is 75% opacity primary text
</b-div>
<b-div
text-color="primary"
:opacity="50"
>
This is 50% opacity primary text
</b-div>
<b-div
text-color="primary"
:opacity="25"
>
This is 25% opacity primary text
</b-div>
</template>