Color and background

Set a background color with contrasting foreground color.

On this page

Custom content

Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color
vue
<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>

With components

Primary Info
vue
<template>
  <Badge text-background="primary">
    Primary
  </Badge>
  <Badge text-background="info">
    Info
  </Badge>
</template>
Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Some quick example text to build on the card title and make up the bulk of the card's content.

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