Links
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 Hover Opacity
Use .link-opacity-*-hover
to adjust link hover opacity in Bootstrap, making links more transparent on hover.
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
Change the underline’s opacity. Requires adding .link-underline
to first set an rgba()
color we use to then modify the alpha opacity.
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
.
Underline color
Change the underline’s color independent of the link text color.
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.
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.