css Question posted in
Some basic documentation can be found here.

Css – 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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search