Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
Description:
An unexpected border-bottom appears on the active .nav-tabs item in Bootstrap 5. This behavior occurs even in the official documentation examples. The issue seems related to rendering inconsistencies, as slight changes in layout (e.g., padding adjustments) affect the visibility of the border.
Environment:
- Bootstrap Version: 5.3.3
- Browser: Firefox 134.0 (64-bit)
- OS: Ubuntu 20.04
Steps to reproduce:
- Open a page with Bootstrap 5’s .nav-tabs.
- Set different padding values on
<body>. - Observe that the active tab sometimes shows a border-bottom that shouldn’t be there.
Screenshots:
<body> with padding: 4rem
<body> with padding: 2rem
Reduced test cases
Applying margin: 1px 0 to .nav-tabs seems to mitigate the issue:
Possible cause?
This could be a browser rendering quirk, possibly due to subpixel rounding issues affecting how the tab's active state is calculated. It seems to be more noticeable in Firefox on Linux, but further testing is needed to confirm if this affects other environments.
Related issues (previous major versions of Bootstrap):
- Active tab in .nav-tabs sometimes still shows bottom border on Firefox in Linux & OS X #19626
- ul.nav-tabs border-bottom is visible on IE11+Edge #18228
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.3
Activity