Aides

Liens colorés

Les classes .link-* colorent un lien avec une couleur du thème et assombrissent ou éclaircissent cette couleur au survol. Elles se combinent avec les utilitaires d’opacité, de décalage et de soulignement.

Couleurs du thème#

Chaque couleur du thème a sa classe .link-{couleur}. .link-light s’utilise sur un fond sombre.

Lien clair sur fond sombre

<ul class="list-unstyled mb-3">
  <li><a href="#" class="link-primary">Lien primaire</a></li>
  <li><a href="#" class="link-secondary">Lien secondaire</a></li>
  <li><a href="#" class="link-success">Lien succès</a></li>
  <li><a href="#" class="link-danger">Lien danger</a></li>
  <li><a href="#" class="link-info">Lien information</a></li>
  <li><a href="#" class="link-dark">Lien sombre</a></li>
  <li><a href="#" class="link-body-emphasis">Lien accentué</a></li>
</ul>
<div class="text-bg-dark p-3">
  <a href="#" class="link-light">Lien clair sur fond sombre</a>
</div>

Opacité du lien#

Les classes .link-opacity-* règlent l’opacité du lien ; le suffixe -hover la règle au survol.

<ul class="list-unstyled mb-0">
  <li><a href="#" class="link-opacity-100">Opacité 100</a></li>
  <li><a href="#" class="link-opacity-75">Opacité 75</a></li>
  <li><a href="#" class="link-opacity-50">Opacité 50</a></li>
  <li><a href="#" class="link-opacity-25">Opacité 25</a></li>
  <li><a href="#" class="link-opacity-10">Opacité 10</a></li>
  <li><a href="#" class="link-opacity-50 link-opacity-100-hover">Passe à 100 au survol</a></li>
</ul>

Soulignement#

Réglez la couleur, l’opacité et le décalage du trait. .link-underline seul reprend la couleur du lien ; .link-underline-opacity-0 supprime le trait visible.

<ul class="list-unstyled mb-0">
  <li><a href="#" class="link-offset-1">Décalage 1</a></li>
  <li><a href="#" class="link-offset-2">Décalage 2</a></li>
  <li><a href="#" class="link-offset-3">Décalage 3</a></li>
  <li><a href="#" class="link-underline-success">Trait vert</a></li>
  <li><a href="#" class="link-underline-opacity-25 link-underline-opacity-100-hover">Trait discret, plein au survol</a></li>
  <li><a href="#" class="link-underline-opacity-0 link-underline-opacity-75-hover">Trait masqué, visible au survol</a></li>
</ul>

Un lien sobre qui ne se révèle qu’au survol, pour une liste de raccourcis.

<nav aria-label="Raccourcis du compte" class="vstack gap-1">
  <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Télécharger le relevé</a>
  <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Programmer un virement</a>
  <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Faire opposition à une carte</a>
</nav>

Classes et variables

Classes et variables
Classe ou variable	Effet
`.link-primary` … `.link-dark`	Couleur du lien et du trait ; la couleur change de 20 % au survol et au focus (`$link-shade-percentage`).
`.link-body-emphasis`	Couleur d’accentuation du texte courant ; l’opacité passe à 0,75 au survol.
`.link-opacity-{10, 25, 50, 75, 100}`	Définit `--bs-link-opacity` ; variante `-hover` au survol.
`.link-offset-{1, 2, 3}`	Décalage du trait (`text-underline-offset`) de .125em, .25em ou .375em ; variante `-hover`.
`.link-underline`	Trait de la couleur du lien, avec `--bs-link-underline-opacity`.
`.link-underline-{couleur}`	Trait de la couleur choisie.
`.link-underline-opacity-{0, 10, 25, 50, 75, 100}`	Opacité du trait ; variante `-hover`.
`--bs-link-opacity`, `--bs-link-underline-opacity`	Variables CSS lues par ces classes.

Bonnes pratiques

À faire

Gardez un soulignement visible par défaut dans les paragraphes : la couleur seule ne suffit pas à reconnaître un lien.
Choisissez .link-light sur fond sombre et .link-dark sur fond clair ou jaune.

À éviter

Ne réduisez pas l’opacité d’un lien au point de passer sous un contraste de 4,5:1.
Ne retirez pas le trait de tous les liens d’un texte sans autre repère visuel.

Accessibilité

.link-warning n’est pas lisible sur fond blanc (environ 1,6:1) : réservez-le à un fond sombre.
Un lien doit se distinguer du texte environnant autrement que par la couleur (trait, graisse).
Le style au focus doit rester visible : voir Anneau de focus.