Doc: Extra top padding after having clicked on anchor links
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
An extra padding top is created for each section after having clicked on the anchor links in the documentation.
Basic rendering
Rendering after the manipulation (with the extra top padding)
I haven't looked at the issue precisely but this is probably related from near and far to:
.bd-content>:target {
padding-top:5rem;
margin-top:-5rem
}
It has changed in https://github.com/twbs/bootstrap/commit/195440f2fb1e94c014a9cf08f3eae40f3d224620.
Nothing has been tested yet on my side but there was another system in place before apparently based on:
// Offset for the sticky header
@include media-breakpoint-up(md) {
:root {
scroll-padding-top: 4rem;
Note: It happens with all breakpoints.
Reduced test cases
1st test case
After having clicked on "Importing", the padding-top stays on top until the page is refreshed.
2nd test case
It is maybe more obvious in this video. We can directly see the extra padding on top of "CSPs and embedded SVGs" that's added even if the content is not near the header.
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.2.0 (current main branch)