Colores

Transmite significado a través del color con un puñado de clases utilitarias de color. Incluye soporte para estilizar enlaces con estados hover, también.

On this page

Consejo de accesibilidad: Usar color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Colores

Colorea el texto con utilidades de color. Si quieres colorear enlaces, puedes usar las clases helper .link-* que tienen estados :hover y :focus.

Las utilidades de color como .text-* que se generan a partir de nuestro mapa Sass original $theme-colors aún no responden a los modos de color, sin embargo, cualquier utilidad .text-*-emphasis sí lo hará. Esto se resolverá en v6.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

html

<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Deprecación: Con la adición de las utilidades .text-opacity-* y las variables CSS para utilidades de texto, .text-black-50 y .text-white-50 están obsoletas a partir de v5.1.0. Se eliminarán en v6.0.0.

Deprecación: Con la adición de los colores y variables de tema expandidos, la utilidad .text-muted ha quedado obsoleta a partir de v5.3.0. Su valor predeterminado también ha sido reasignado a la nueva variable CSS --bs-secondary-color para soportar mejor los modos de color. Se eliminará en v6.0.0.

Opacidad

Añadido en v5.1.0

A partir de v5.1.0, las utilidades de color de texto se generan con Sass usando variables CSS. Esto permite cambios de color en tiempo real sin compilación y cambios dinámicos de transparencia alfa.

Cómo funciona

Considera nuestra utilidad .text-primary predeterminada.

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

Usamos una versión RGB de nuestra variable CSS --bs-primary (con el valor 13, 110, 253) y adjuntamos una segunda variable CSS, --bs-text-opacity, para la transparencia alfa (con un valor predeterminado de 1 gracias a una variable CSS local). Esto significa que cada vez que usas .text-primary ahora, tu valor color calculado es rgba(13, 110, 253, 1). La variable CSS local dentro de cada clase .text-* evita problemas de herencia para que las instancias anidadas de las utilidades no.

Ejemplo

Para cambiar esa opacidad, sobrescribe --bs-text-opacity mediante estilos personalizados o estilos inline.

Este es texto primario predeterminado

Este es texto primario al 50% de opacidad

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>

O, elige cualquiera de las utilidades .text-opacity:

Este es texto primario predeterminado

Este es texto primario al 75% de opacidad

Este es texto primario al 50% de opacidad

Este es texto primario al 25% de opacidad

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>

Especificidad

A veces las clases contextuales no se pueden aplicar debido a la especificidad de otro selector. En algunos casos, una solución suficiente es envolver el contenido de tu elemento en un <div> o un elemento más semántico con la clase deseada.

CSS

Además de la siguiente funcionalidad de Sass, considera leer sobre nuestras propiedades personalizadas CSS (también conocidas como variables CSS) para colores y más.

Variables Sass

La mayoría de las utilidades de color se generan a partir de nuestros colores del tema, reasignados desde nuestras variables de paleta de colores genérica.

scss/_variables.scss

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

scss/_variables.scss

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Los colores en escala de grises también están disponibles, pero solo un subconjunto se usa para generar utilidades.

scss/_variables.scss

$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;

scss/_maps.scss

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

Variables para establecer colores en las utilidades .text-*-emphasis en modo claro y oscuro:

scss/_variables.scss

$primary-text-emphasis:   shade-color($primary, 60%);
$secondary-text-emphasis: shade-color($secondary, 60%);
$success-text-emphasis:   shade-color($success, 60%);
$info-text-emphasis:      shade-color($info, 60%);
$warning-text-emphasis:   shade-color($warning, 60%);
$danger-text-emphasis:    shade-color($danger, 60%);
$light-text-emphasis:     $gray-700;
$dark-text-emphasis:      $gray-700;

scss/_variables-dark.scss

$primary-text-emphasis-dark:        tint-color($primary, 40%);
$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
$success-text-emphasis-dark:        tint-color($success, 40%);
$info-text-emphasis-dark:           tint-color($info, 40%);
$warning-text-emphasis-dark:        tint-color($warning, 40%);
$danger-text-emphasis-dark:         tint-color($danger, 40%);
$light-text-emphasis-dark:          $gray-100;
$dark-text-emphasis-dark:           $gray-300;

Mapas de Sass

Los colores del tema se colocan luego en un mapa de Sass para que podamos iterar sobre ellos y generar nuestras utilidades, modificadores de componentes y más.

scss/_variables.scss

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

Los colores en escala de grises también están disponibles como un mapa de Sass. Este mapa no se usa para generar ninguna utilidad.

scss/_variables.scss

$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
);

Los colores RGB se generan a partir de un mapa Sass separado:

scss/_maps.scss

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

Las opacidades de color se basan en eso con su propio mapa que es consumido por la API de utilidades:

scss/_maps.scss

$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");

$utilities-text-emphasis-colors: (
  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
  "success-emphasis": var(--#{$prefix}success-text-emphasis),
  "info-emphasis": var(--#{$prefix}info-text-emphasis),
  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
  "light-emphasis": var(--#{$prefix}light-text-emphasis),
  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
);

Los colores de texto adaptativos a los modos de color también están disponibles como un mapa Sass:

scss/_maps.scss

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

scss/_maps.scss

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

API de utilidades de Sass

Las utilidades de color se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

scss/_utilities.scss

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