### Links

##### Colored Links

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

##### Link Utilities

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

##### Link Opacity

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

##### Link Hover Opacity

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

##### Underline Color

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

##### Underline Opacity

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

##### Underline Offset

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

##### Hover Variants

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.

Underline opacity 0