Fun update for links in Bootstrap with a few new changes across the project...
.icon-link
helper
New This allows you to immediately pair any Bootstrap Icon with a hyperlink and have it spaced, aligned, and styled properly. Includes support for icons before or after the text, and includes a basic hover state. There's opportunity for future hover states here, too. Might make more sense as a component?
Color links are now built with CSS variables
Instead of resetting the color
property, we reset the --bs-link-color-rgb
values. I've also added a new text-decoration-color
property to these helpers that defaults to the current link color in rgb
form with --bs-link-underline-opacity
as the alpha layer (defaulting to 1
). This leads me to the next update...
Introducing several new link utilities
To help modify icon links, colored links, and even regular links, we have new .link-opacity-*
to change the alpha transparency, .link-offset-*
to change the distance of the underline, .link-underline-*
to change the underline color, and
.link-underline-opacity-*to change the underline alpha transparency. The link opacity and link underline opacity utilities also have a predefined
:hover` variant as well.
As a result, this also removes some other custom .icon-link
instances from the features snippet example and homepage.