Skip to main content Skip to docs navigation

Colores

Transmite significado a través del color con un puñado de clases de utilidad de color. También incluye soporte para diseñar enlaces con estado hover.

Colores

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

.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

<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>
En desuso: Con la adición de las utilidades .text-opacity-* y las variables CSS para las utilidades de texto, .text-black-50 y .text-white-50 quedan en desuso a partir de la v5.1.0 . Se eliminarán en v6.0.0.
Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrate de que la información denotada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

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 funcionan los colores?

Analicemos nuestra utilidad predeterminada .text-primary.

.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 de 13, 110, 253) y adjuntamos una segunda variable CSS, --bs-text-opacity, para la transparencia alfa (con un valor predeterminado 1 gracias a una variable CSS local). Esto significa que cada vez que usas .text-primary ahora, tu valor de color calculado es rgba(13, 110, 253, 1). La variable CSS local dentro de cada clase .text-* evita problemas de herencia, por lo que las instancias anidadas de las utilidades no tienen automáticamente una transparencia alfa modificada.

Ejemplo

Para cambiar la opacidad, sobrescribe --bs-text-opacity a través de estilos personalizados o estilos en línea.

Este es el texto primary predeterminado
Este es un texto primary con una opacidad del 50%
<div class="text-primary">Este es el texto primary predeterminado</div>
<div class="text-primary" style="--bs-text-opacity: .5;">Este es un texto primary con una opacidad del 50%</div>

O bien, elije cualquiera de las utilidades .text-opacity:

Este es el texto primary predeterminado
Este es un texto primary con una opacidad del 75%
Este es un texto primary con una opacidad del 50%
Este es un texto primary con una opacidad del 25%
<div class="text-primary">Este es el texto primary predeterminado</div>
<div class="text-primary text-opacity-75">Este es un texto primary con una opacidad del 75%</div>
<div class="text-primary text-opacity-50">Este es un texto primary con una opacidad del 50%</div>
<div class="text-primary text-opacity-25">Este es un texto primary con una opacidad del 25%</div>

Especificidad

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

Sass

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

La mayoría de las utilidades de color son generadas por nuestros colores de tema, reasignados desde nuestras variables genéricas de paleta de colores.

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

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

$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

Luego, los colores del tema se colocan en un mapa de Sass para que podamos recorrerlos para generar nuestras utilidades, modificadores de componentes y más.

$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 mapa Sass. Este mapa no se usa para generar utilidades.

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

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

Y las opacidades de color se basan en esto con su propio mapa que consume la API de utilidades:

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

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

    "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
      )
    ),