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 links can also be modified by our link utilities.
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 distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.
Default link
Offset 1 link
Offset 2 link
Offset 3 link