Cor e fundo

Defina uma cor de fundo com uma cor de primeiro plano contrastante.

Nesta página

Visão geral

Adicionado na v5.2.0

Os auxiliares de cor e plano de fundo combinam o poder de nossos .text-*utilitários e .bg-*utilitários em uma classe. Usando nossa função Sass color-contrast(), determinamos automaticamente um contraste colorpara um determinado arquivo background-color.

Atenção! Atualmente não há suporte para uma color-contrastfunção nativa de CSS, então usamos a nossa própria via Sass. Isso significa que personalizar as cores do nosso tema por meio de variáveis CSS pode causar problemas de contraste de cores com esses utilitários.

Primário com cor contrastante

Secundário com cor contrastante

Sucesso com cores contrastantes

Perigo com cor contrastante

Aviso com cor contrastante

Informações com cores contrastantes

Luz com cor contrastante

Escuro com cor contrastante

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Com componentes

Use-os no lugar de combinados .text-*e .bg-*classes, como em emblemas :

Primário Informações

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Ou nos cartões :

Cabeçalho

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>