Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37762

Add new link utilities, icon link helper, and update colored link helpers

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge link-utils into main Dec 29, 2022
  • Overview 9
  • Commits 15
  • Pipelines 0
  • Changes 21

Fun update for links in Bootstrap with a few new changes across the project...

New .icon-link helper

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?

CleanShot 2022-12-29 at 12 57 29@2x

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.

CleanShot 2022-12-29 at 12 57 57@2x CleanShot 2022-12-29 at 12 58 11@2x CleanShot 2022-12-29 at 12 58 18@2x CleanShot 2022-12-29 at 12 58 23@2x CleanShot 2022-12-29 at 12 58 30@2x

As a result, this also removes some other custom .icon-link instances from the features snippet example and homepage.

Live preview

  • https://deploy-preview-37762--twbs-bootstrap.netlify.app/docs/5.3/helpers/icon-link/
  • https://deploy-preview-37762--twbs-bootstrap.netlify.app/docs/5.3/utilities/link/
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: link-utils