cssbootstrap-5right-alignbootstrap-toast

In a Bootstrap 5 toast how can I align the Close button to the right?

I define a Bootstrap 5 toast like this:

<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto">Help</strong>
        <button type="button" class="end-0 close" data-dismiss="toast">
            <span>&times;</span>
        </button>
    </div>
    ...
</div>

hoping the end-0 class would align the Close button character &times; to the right border of the toast. Instead the class does nothing. Other placement classes like m-2 do work.

Can I do this with a Bootstrap placement class or do I have to add manual CSS for this?

Solution

  • The close button is by default aligned to the right (as @MrUpsidown pointed out in a comment). The problem had appeared, because I was using both BS-4 and half BS-5 code.

    Converting everything to BS-5 code aligned the Close Button to the right.