Skip to content

Conversation

@SamiNajim2
Copy link

Summary

This PR fixes a styling inconsistency in Bootstrap’s List group component where active .list-group-item-action elements lose their underline on hover when link hover decoration is enabled. This behavior contradicts global link styles and creates an inconsistent user experience.

Problem

When hovering over an active list group link (e.g., in the “Links and Buttons” example on the List group docs page), the underline disappears due to a text-decoration: none rule applied to hover/focus states. This prevents active list items from inheriting the expected $link-hover-decoration style.

This issue was reported here: #41806

Changes

  • Updated scss/_list-group.scss:
    • Removed the text-decoration: none; override inside the hover/focus selector for .list-group-item-action:not(.active) so that active list group links retain their underline on hover.

Testing

  • Ran npm run dist to rebuild styles
  • Ran npm run docs-serve locally and verified:
    • Active list group links maintain underline styling on hover, matching global link hover decoration behavior

@SamiNajim2 SamiNajim2 requested a review from a team as a code owner November 27, 2025 18:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant