Modal "close" button using dark variant not aligned to the right
Batman08 opened this issue · comments
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
Have the same problem since 5.3.3 but even not in dark mode.
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.
Updated issue with live demo
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>Thank you for the suggested fix.