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.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

Colored link helpers have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

You can even change the opacity level on hover.

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

Change the underline’s color independent of the link text color.

Primary underline

Secondary underline

Success underline

Danger underline

Warning underline

Info underline

Light underline

Dark underline

Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

Default link

Offset 1 link

Offset 2 link

Offset 3 link

Just like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.