Pagination are not displayed correctly in the current main branch

[jonnysp]

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

current release looks good https://getbootstrap.com/docs/5.1/components/pagination/#overview

current brunch looks bad https://twbs-bootstrap.netlify.app/docs/5.1/components/pagination/#overview

Reduced test cases

https://getbootstrap.com/docs/5.1/components/pagination/#overview
https://twbs-bootstrap.netlify.app/docs/5.1/components/pagination/#overview

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

v5.1.3 and current main Brunch

[mdo]

Appreciate your bug reports on this stuff! <3

[jonnysp]

😉

[tysongach]

I just upgrade to v5.2 and am seeing what I believe to be the same bug that this issue is filed against:

Let me know if you’d prefer I open a new issue.

---

As a gut check, I looked at the compiled CSS on the Bootstrap v5.2 doc website, which has…

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

…whereas my compiled CSS is:

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item .page-link {
  border-radius: var(--bs-pagination-border-radius);
}

That makes me suspicious of this line, which was recently changed:

bootstrap/scss/_pagination.scss

Line 78 in edf9c40

@if $pagination-margin-start == (calc($pagination-border-width * -1)) {

This appears to be evaluating to false for me. I’ve tried to create a reduced test case here: https://www.sassmeister.com/gist/eeae55c689cbaba226ec9ef0d148f315 (note that this is using Dart Sass v1.32.12)

If that test case is valid, it seems as though the compiled version of Bootstrap 5.2 differs from (at least some…) consumer-compiled versions.

It makes me wonder if this is a variation between Sass compilers or versions. I’m in a Rails app, using the sass-rails and bootstrap gems. I believe sass-rails is a wrapper around LibSass. I’m not sure which Sass was used to build the distributed CSS files for Bootstrap 5.2.

Any help greatly appreciated! Let me know if I can provide anything else. Thanks!

[julien-deramond]

Hey @tysongach. Could you please create an issue with your comment as a description?
I'm wondering if it isn't linked to https://github.com/twbs/bootstrap/pull/36740/files and what I asked here: #36740 (comment).
I played a bit with your sassmeister example and I got the impression that @if $pagination-margin-start == (calc($pagination-border-width * -1)) is different than @if $pagination-margin-start == ($pagination-border-width * -1). That could maybe explain what you observe 🤷

[tysongach]

@julien-deramond Sure thing! Here we go: #36820

Thank you.