Bootstrap Link Helper Patterns

Colored Links

Use .link-* classes to apply theme colors to links with hover darkening. All 9 color variants automatically adjust on hover.

Link Opacity

Control link transparency with .link-opacity-* classes. Combine with -hover suffix for interactive effects.

Static Opacity Levels

Opacity Change on Hover

Use .link-opacity-*-hover to change opacity on hover. Combine with static opacity for reveal effects.

Link Underline Utilities

Fine-tune link underlines with color, opacity, and offset utilities.

Underline Colors

Apply theme colors to underlines with .link-underline-* classes.

Underline Opacity

Important: Underline opacity utilities require the base .link-underline class to function properly.

Underline Reveal on Hover

Combine .link-underline-opacity-0 with .link-underline-opacity-*-hover to reveal underlines on hover.

Underline Offset

Adjust the distance between text and underline with .link-offset-* classes. Values range from 1 (closest) to 3 (furthest).

Offset Change on Hover

Combined Underline Styling

Combine multiple underline utilities for custom effects.

Focus Ring

Customize focus indicators with .focus-ring utilities. Tab through elements below to see focus rings in action.

Default Focus Ring

The base .focus-ring class applies a subtle focus indicator.

Colored Focus Rings

Apply theme colors with .focus-ring-* classes.

Custom Focus Ring Colors

Use the --bs-focus-ring-color CSS variable for custom colors.

Focus Ring on Buttons

Override button focus styles by combining .focus-ring with buttons.

Icon Link

Combine icons with text using .icon-link. Add .icon-link-hover for animated effects on hover.

Icon Before Text

Icon After Text

Hover Animation

Add .icon-link-hover to animate the icon on hover. The icon moves slightly in its natural direction.

Custom Transform Direction

Override the animation direction with --bs-icon-link-transform.

Colored Icon Links

Combine with link color and underline utilities for themed icon links.

Stretched Link

Make an entire container clickable by adding .stretched-link to a nested link. The parent container must have position: relative.

Card with Stretched Link

Cards already have position: relative, so stretched links work out of the box.

Card with stretched link

The entire card is clickable. Hover to see cursor change.

Go somewhere

Row Layout with Stretched Link

Add .position-relative to the clickable container.

Columns with stretched link

Entire row is clickable. This pattern is great for featured content sections.

Read more

Custom Container

Any element works as long as it has .position-relative.

Card Grid with Stretched Links

Each card is independently clickable.

Important Considerations