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.
<a class="link-opacity-10" href="javascript:void(0)">Link opacity 10</a>
<a class="link-opacity-25" href="javascript:void(0)">Link opacity 25</a>
<a class="link-opacity-50" href="javascript:void(0)">Link opacity 50</a>
<a class="link-opacity-75" href="javascript:void(0)">Link opacity 75</a>
<a class="link-opacity-100" href="javascript:void(0)">Link opacity 100</a>Link Hover Opacity
Use .link-opacity-*-hover to adjust link hover opacity in Bootstrap, making links more transparent on hover.
<a class="link-opacity-10-hover" href="javascript:void(0)">Link hover opacity 10</a>
<a class="link-opacity-25-hover" href="javascript:void(0)">Link hover opacity 25</a>
<a class="link-opacity-50-hover" href="javascript:void(0)">Link hover opacity 50</a>
<a class="link-opacity-75-hover" href="javascript:void(0)">Link hover opacity 75</a>
<a class="link-opacity-100-hover" href="javascript:void(0)">Link hover opacity 100</a>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.
<a class="text-decoration-underline 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>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.
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0">Underline opacity 0</a>
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10">Underline opacity 10</a>
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25">Underline opacity 25</a>
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50">Underline opacity 50</a>
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75">Underline opacity 75</a>
<a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100">Underline opacity 100</a>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.
<a href="javascript:void(0)">Default link</a>
<a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 1 link</a>
<a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 2 link</a>
<a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 3 link</a>Pointer Event
<p><a href="javascript:void(0)" class="pe-none text-primary fw-medium text-decoration-underline" tabindex="-1">This link</a> can not be clicked.</p>
<p><a href="javascript:void(0)" class="pe-auto text-primary fw-medium text-decoration-underline">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none mb-0"><a href="javascript:void(0)" tabindex="-1" class="text-primary fw-medium text-decoration-underline">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="javascript:void(0)" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>Underline color
Change the underline’s color independent of the link text color.
<a href="javascript:void(0)" class="text-decoration-underline link-underline-primary">Primary underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-secondary">Secondary underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-success">Success underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-danger">Danger underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-warning">Warning underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-info">Info underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-light">Light underline</a>
<a href="javascript:void(0)" class="text-decoration-underline link-underline-dark">Dark underline</a>Link colors
Use the .link-* classes to style links with color, including :hover and :focus states. Some colors are lighter and work best on dark backgrounds for better contrast.
<a href="javascript:void(0)" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a>
<a href="javascript:void(0)" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a>
<a href="javascript:void(0)" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a>
<a href="javascript:void(0)" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a>
<a href="javascript:void(0)" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a>
<a href="javascript:void(0)" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a>
<a href="javascript:void(0)" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a>
<a href="javascript:void(0)" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a>
<a href="javascript:void(0)" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a>Link utilities
Link styling has been enhanced with new utilities. You can now adjust link opacity, underline opacity, and underline offset using these updated helpers.
<a href="javascript:void(0)" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25-hover">Primary link</a>
<a href="javascript:void(0)" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Secondary link</a>
<a href="javascript:void(0)" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-75-hover">Success link</a>
<a href="javascript:void(0)" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-50-hover">Danger link</a>
<a href="javascript:void(0)" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Warning link</a>
<a href="javascript:void(0)" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Info link</a>
<a href="javascript:void(0)" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-75-hover">Light link</a>
<a href="javascript:void(0)" class="link-dark link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Dark link</a>
<a href="javascript:void(0)" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25-hover">Emphasis link</a>