Colors

Convey meaning through 'color' with a handful of color utility classes. Includes support for styling links with hover states, too.

On this page

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.

.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

vue
<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>

Opacity

Example

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"
    :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>