Link utilities

Link opacity #

You can change the alpha opacity of the link hsla() color value with .link-opacity-{value}, where {value} can be a percentage of 100, 75, 50, 25, or 10. Please be aware that changes to a color's opacity can lead to links with insufficient contrast.

<!-- Setting link opacity -->
<a href="#" class="link-opacity-100">Link opacity 100</a>
<a href="#" class="link-opacity-75">Link opacity 75</a>
<a href="#" class="link-opacity-50">Link opacity 50</a>
<a href="#" class="link-opacity-25">Link opacity 25</a>
<a href="#" class="link-opacity-10">Link opacity 10</a>

You can also change the opacity level on hover using .link-opacity-{value}-hover.

<!-- Setting link opacity on hover -->
<a href="#" class="link-opacity-100-hover">Link hover opacity 100</a>
<a href="#" class="link-opacity-75-hover">Link hover opacity 75</a>
<a href="#" class="link-opacity-50-hover">Link hover opacity 50</a>
<a href="#" class="link-opacity-25-hover">Link hover opacity 25</a>
<a href="#" class="link-opacity-10-hover">Link hover opacity 10</a>

Link underlines #

Style the underline color, offset, and opacity using the link underline utilities.

Link underlines Underline color #

Change the underline's color using .link-underline-{color}, where {color} can be primary, secondary, success, danger, warning, info, light, or dark.

<!-- Setting underline color -->
<a href="#" class="link-underline-secondary">Prev.</a>
<a href="#" class="link-underline-primary">Next</a>

Link underlines Underline offset #

Change the underline's distance from the text using .link-offset-{distance}, where {distance} can be 1, 2, or 3. The offset is set in em units to automatically scale with the element's current font-size.

<!-- Setting underline offset -->
<a href="#">Default link</a>
<a class="link-offset-1" href="#">Offset 1 link</a>
<a class="link-offset-2" href="#">Offset 2 link</a>
<a class="link-offset-3" href="#">Offset 3 link</a>

Link underlines Underline opacity #

Change the underline's opacity using .link-underline-opacity-{value}, where {value} can be a percentage of 100, 75, 50, 25, 10, or 0. Please note, this requires adding .link-underline to first set an hsla() color, which is then used to modify the alpha opacity.

<!-- Setting underline opacity -->
<a href="#" class="link-underline link-underline-opacity-100">Underline opacity 100</a>
<a href="#" class="link-underline link-underline-opacity-75">Underline opacity 75</a>
<a href="#" class="link-underline link-underline-opacity-50">Underline opacity 50</a>
<a href="#" class="link-underline link-underline-opacity-25">Underline opacity 25</a>
<a href="#" class="link-underline link-underline-opacity-10">Underline opacity 10</a>
<a href="#" class="link-underline link-underline-opacity-0">Underline opacity 0</a>

Link underlines Hover variants #

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

<!-- Underline utilities with hover variants -->
<a href="#" class="link-offset-2 link-offset-2-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Go to dashboard</a>

Colored links #

You can also pair colored links with the link utilities shown on this page.

<!-- Info link customized with link utilities -->
<a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Go to dashboard</a>