Ir para o conteúdo principal Pular para a navegação de documentos
Check

Transmita significado colorcom um punhado de classes de utilidade de cores. Inclui suporte para links de estilo com estados de foco também.

Cores

Colorir texto com utilitários de cor. Se você quiser colorir links, você pode usar as .link-*classes auxiliares que possuem :hovere :focusestados.

.text-primary

.text-secondary

.text-sucesso

.text-perigo

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-silenciado

.text-white

.text-black-50

.text-white-50

html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Obsoleto: Com a adição de .text-opacity-*utilitários e variáveis ​​CSS para utilitários de texto, .text-black-50e .text-white-50estão obsoletos a partir da v5.1.0. Eles serão removidos na v6.0.0.
Transmitindo significado para tecnologias assistivas

O uso de cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .visually-hiddenclasse.

Opacidade

Adicionado na v5.1.0

A partir da v5.1.0, os utilitários de cor de texto são gerados com Sass usando variáveis ​​CSS. Isso permite alterações de cores em tempo real sem compilação e alterações dinâmicas de transparência alfa.

Como funciona

Considere nosso .text-primaryutilitário padrão.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Usamos uma versão RGB de nossa variável CSS --bs-primary(com o valor de 13, 110, 253) e anexamos uma segunda variável CSS, --bs-text-opacity, para a transparência alfa (com um valor padrão 1graças a uma variável CSS local). Isso significa que sempre que você usar agora, seu valor .text-primarycalculado será . A variável CSS local dentro de cada classe evita problemas de herança para que instâncias aninhadas dos utilitários não tenham automaticamente uma transparência alfa modificada.colorrgba(13, 110, 253, 1).text-*

Exemplo

Para alterar essa opacidade, substitua --bs-text-opacitypor estilos personalizados ou estilos embutidos.

Este é o texto primário padrão
Este é um texto primário com 50% de opacidade
html
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Ou escolha qualquer um dos .text-opacityutilitários:

Este é o texto primário padrão
Este é um texto primário com 75% de opacidade
Este é um texto primário com 50% de opacidade
Este é um texto primário com 25% de opacidade
html
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Especificidade

Às vezes, as classes contextuais não podem ser aplicadas devido à especificidade de outro seletor. Em alguns casos, uma solução alternativa suficiente é envolver o conteúdo do seu elemento em um <div>ou mais elementos semânticos com a classe desejada.

Sass

Além da funcionalidade Sass a seguir, considere ler sobre nossas propriedades personalizadas CSS incluídas (também conhecidas como variáveis ​​CSS) para cores e muito mais.

Variáveis

A maioria dos colorutilitários é gerada por nossas cores de tema, reatribuídas de nossas variáveis ​​genéricas de paleta de cores.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

As cores em tons de cinza também estão disponíveis, mas apenas um subconjunto é usado para gerar quaisquer utilitários.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Mapa

As cores do tema são então colocadas em um mapa Sass para que possamos fazer um loop sobre elas para gerar nossos utilitários, modificadores de componentes e muito mais.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

As cores em tons de cinza também estão disponíveis como um mapa Sass. Este mapa não é usado para gerar nenhum utilitário.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

As cores RGB são geradas a partir de um mapa Sass separado:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

E as opacidades de cores se baseiam nisso com seu próprio mapa que é consumido pela API de utilitários:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

API de utilitários

Os utilitários de cores são declarados em nossa API de utilitários em scss/_utilities.scss. Saiba como usar a API de utilitários.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),