Modal "close" button using dark variant not aligned to the right

[Batman08]

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

If you use the dark variant of the modal "close" button as show here;
https://getbootstrap.com/docs/5.3/components/close-button/#dark-variant

Then it looks like the change done here:
#39373 (comment)

i.e. "The space-between is not used anymore as the position of the btn-close is based on the margin now."

This means the "close" button doesn't get pushed to the far right and instead sits next to the title on the left.

Reduced test cases

https://codepen.io/Batman08/pen/bGJbxQa

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

Windows

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

Chrome

What version of Bootstrap are you using?

5.3.3

[AHorak]

Have the same problem since 5.3.3 but even not in dark mode.

[github-actions]

Hello @Batman08. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[Batman08]

https://codepen.io/Batman08/pen/bGJbxQa

Updated issue with live demo

[julien-deramond]

Thanks for the reproducible use case @Batman08
Here's how to fix that: https://codepen.io/julien-deramond/pen/ExJYJoM

Adding an extra <div> surrounding the button, it messes with the CSS rules for the alignment.
Instead, you can add for example the data-bs-theme="dark" directly higher in the existing <div>:

<div class="modal-header bg-dark" data-bs-theme="dark">
  <h1 class="modal-title fs-5 text-white" id="exampleModalIssueLabel">Modal Issue</h1>
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

[Batman08]

Thank you for the suggested fix.