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="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
<p><a class="link-opacity-10" href="#">Link opacity
10</a></p> <p><a class="link-opacity-25"
href="#">Link opacity 25</a></p> <p><a
class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity
75</a></p> <p><a class="link-opacity-100"
href="#">Link opacity 100</a></p>
You can even change the opacity level on hover.
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
<p><a class="link-opacity-10-hover" href="#">Link hover opacity
10</a></p> <p><a class="link-opacity-25-hover"
href="#">Link hover opacity 25</a></p> <p><a
class="link-opacity-50-hover" href="#">Link hover opacity
50</a></p> <p><a class="link-opacity-75-hover"
href="#">Link hover opacity 75</a></p> <p><a
class="link-opacity-100-hover" href="#">Link hover opacity
100</a></p>
Link underlines
Underline color
Change the underline’s color independent of the link text color.
<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" class="link-underline-dark">Dark underline</a></p>
<p><a href="#" class="link-underline-primary">Primary
underline</a></p> <p><a href="#"
class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success
underline</a></p> <p><a href="#"
class="link-underline-danger">Danger underline</a></p> <p><a
href="#" class="link-underline-warning">Warning
underline</a></p> <p><a href="#"
class="link-underline-info">Info underline</a></p> <p><a
href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" 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="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
<p><a href="#">Default link</a></p> <p><a
class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2
link</a></p> <p><a class="link-offset-3"
href="#">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="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-0"
href="#">Underline opacity 0</a></p> <p><a
class="link-offset-2 link-underline link-underline-opacity-10"
href="#">Underline opacity 10</a></p> <p><a
class="link-offset-2 link-underline link-underline-opacity-25"
href="#">Underline opacity 25</a></p> <p><a
class="link-offset-2 link-underline link-underline-opacity-50"
href="#">Underline opacity 50</a></p> <p><a
class="link-offset-2 link-underline link-underline-opacity-75"
href="#">Underline opacity 75</a></p> <p><a
class="link-offset-2 link-underline link-underline-opacity-100"
href="#">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="#">
Underline opacity 0
</a>
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0
link-underline-opacity-75-hover" href="#"> 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="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
<p><a href="#" class="link-primary link-offset-2
link-underline-opacity-25 link-underline-opacity-100-hover">Primary
link</a></p> <p><a href="#" class="link-secondary
link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary
link</a></p> <p><a href="#" class="link-success
link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success
link</a></p> <p><a href="#" class="link-danger link-offset-2
link-underline-opacity-25 link-underline-opacity-100-hover">Danger
link</a></p> <p><a href="#" class="link-warning
link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning
link</a></p> <p><a href="#" class="link-info link-offset-2
link-underline-opacity-25 link-underline-opacity-100-hover">Info
link</a></p> <p><a href="#" class="link-light link-offset-2
link-underline-opacity-25 link-underline-opacity-100-hover">Light
link</a></p> <p><a href="#" class="link-dark link-offset-2
link-underline-opacity-25 link-underline-opacity-100-hover">Dark
link</a></p> <p><a href="#" class="link-body-emphasis
link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis
link</a></p>
Accessibility tip: Using color to add meaning only provides a visual indication,
which will not be conveyed to users of assistive technologies like screen readers. Please ensure the
meaning is obvious from the content itself (e.g., the visible text with a
sufficient color contrast) or is
included through alternative means, such as additional text hidden with the
.visually-hidden class.