Enlaces coloreados (Colored links)

Enlaces coloreados con estados de desplazamiento (hover).

En esta página

Colores de enlaces

Puedes utilizar las clases .link-* para colorear enlaces. A diferencia de las clases .text-*, estas clases tienen un estado :hover y :focus. Algunos de los estilos de enlaces utilizan un color de primer plano relativamente claro y solo deben usarse sobre un fondo oscuro para tener suficiente contraste.

¡Atención! .link-body-emphasis es actualmente el único enlace coloreado que se adapta a los modos de color. Se trata como un caso especial hasta que llegue la versión 6 y podamos reconstruir más a fondo los colores de nuestro tema para los modos de color. Hasta entonces, es un color de enlace único y de alto contraste con estilos :hover y :focus personalizados. Sin embargo, sigue respondiendo a las nuevas utilidades de enlaces.

Enlace destacado (Emphasis link)

html

<p><a href="#" class="link-primary">Enlace Primary</a></p>
<p><a href="#" class="link-secondary">Enlace Secondary</a></p>
<p><a href="#" class="link-success">Enlace Success</a></p>
<p><a href="#" class="link-danger">Enlace Danger</a></p>
<p><a href="#" class="link-warning">Enlace Warning</a></p>
<p><a href="#" class="link-info">Enlace Info</a></p>
<p><a href="#" class="link-light">Enlace Light</a></p>
<p><a href="#" class="link-dark">Enlace Dark</a></p>
<p><a href="#" class="link-body-emphasis">Enlace destacado (Emphasis link)</a></p>

Consejo de accesibilidad: 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 el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Utilidades de enlaces

Agregado en v5.3.0

Los enlaces coloreados también se pueden modificar mediante nuestras utilidades de enlaces.