Colored links

Colored links with hover states

On this page

Link colors

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Heads up! .link-body-emphasis is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom :hover and :focus styles. However, it still responds to the new link utilities.

html

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

ProTip! Conveying meaning through color alone will not be conveyed to users of assistive technologies like screen readers. Please ensure the context is is obvious itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Link utilities

Added in v5.3.0

Colored links can also be modified by our link utilities.