Coloured Links

Hover states on colored links

The .link-* classes can be used to colorize links. These classes have the states :hover and :focus, unlike normal .text-* classes.

Heads up! The only colored link that can adjust to different color modes at this time is link-body-emphasis. Until v2 comes out and we can more extensively rebuild our theme colors for color modes, it is handled as a special situation. It has a distinct, high-contrast link color with unique :hover and :focus styles until then. It nonetheless reacts to the new connection utilities.

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

RESULT

INFO

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.

Previous « Color & Background

Next Position »