"justify-content-end" does not align flex items to the right

[s0rin]

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

After update Bootstrap from 5.3.2 to 5.3.3 "justify-content-end" does not align flex items to the right (on any browser i.e. Chrome, Firefox, MS Edge). This has worked for the close buttons of modal windows until 5.3.2

Reduced test cases

    <div class="d-flex justify-content-end">
      <%= content_tag :button, nil, :class => 'btn-close', :aria_label => "Close",
                      :data => {:bs_dismiss => "modal", :bs_title => "Close window", :bs_placement => "right",
                      	        :bs_toggle => "tooltip"} %>
    </div>

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

Linux

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

No response

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Thanks for reporting an issue @s0rin

Here's the CSS rule of bootstrap.css in 5.3.3:

bootstrap/dist/css/bootstrap.css

Lines 7783 to 7785 in 6e1f75f

	.justify-content-end {
	justify-content: flex-end !important;
	}

Here's the CSS rule of bootstrap.css in 5.3.2:

bootstrap/dist/css/bootstrap.css

Lines 7794 to 7796 in 344e912

	.justify-content-end {
	justify-content: flex-end !important;
	}

Nothing has changed specifically for this class.

Please try to create a reproducible live example of your issue with CodePen or StackBlitz so we can analyze the real problem :)

[s0rin]

Here the reproducible live examples as requested:
[Bootstrap 5.3.2 modal popup] (https://codepen.io/s0rin/pen/VwJoWpo)
[Bootstrap 5.3.3 modal popup] (https://codepen.io/s0rin/pen/yLdmXLo)

[julien-deramond]

OK, I get it. We changed the CSS of the modal in 5.3.3 (see https://github.com/twbs/bootstrap/pull/39373/files).
On your side, you don't need this extra <div> and use the HTML markup provided in our Modal documentation.
To fix the issue, you can remove the surrounding <div class="d-flex justify-content-end">.

[s0rin]

That's right, the fix works, thank you!