keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Link

Link.

Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. Click here

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.


<p><a class="link-opacity-10" href="javascript:void(0);">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="javascript:void(0);">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="javascript:void(0);">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="javascript:void(0);">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="javascript:void(0);">Link opacity 100</a></p>


<p><a class="link-opacity-10-hover" href="javascript:void(0);">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="javascript:void(0);">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="javascript:void(0);">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="javascript:void(0);">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="javascript:void(0);">Link hover opacity 100</a></p>

Underline color

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


<p><a href="javascript:void(0);" class="link-underline-primary">Primary underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-success">Success underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-danger">Danger underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-warning">Warning underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-info">Info underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-light">Light underline</a></p>
<p><a href="javascript:void(0);" class="link-underline-dark">Dark underline</a></p>

Underline offset

Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.


<p><a href="javascript:void(0);">Default link</a></p>
<p><a class="link-offset-1" href="javascript:void(0);">Offset 1 link</a></p>
<p><a class="link-offset-2" href="javascript:void(0);">Offset 2 link</a></p>
<p><a class="link-offset-3" href="javascript:void(0);">Offset 3 link</a></p>

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.


<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="javascript:void(0);">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="javascript:void(0);">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="javascript:void(0);">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="javascript:void(0);">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="javascript:void(0);">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="javascript:void(0);">Underline opacity 100</a></p>

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.


<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="javascript:void(0);">Underline opacity 0</a>

Colored links

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.


<p><a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="javascript:void(0);" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="javascript:void(0);" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="javascript:void(0);" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="javascript:void(0);" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="javascript:void(0);" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="javascript:void(0);" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="javascript:void(0);" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="javascript:void(0);" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>