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

Question

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 × 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?

Answer 1

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.

Answer 2

use 'float-end' Bootstrap 5 class to move the element to the right side. For Bootstrap 4, use 'pull-right' or 'float-right' class. It seems you are using Bootstrap 4.

<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="float-end close" data-bs-dismiss="toast">
        <span>&times;</span>
    </button>
</div>
...

Answer 3

You need to add the "justify-content-between" class to the "toast-header" class. This will align the close button to the right. Here's how you can do it:

<div class="toast-header justify-content-between">
    <strong class="me-auto">Toast Header</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>