toast close button position

[ZhangChengLin]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

https://getbootstrap.com/docs/5.1/components/toasts/#basic

The right layout should be added to the close button in the .toast-header. And the close button in toast modal offcanvas alert does not unify the margin position.

.toast-header .btn-close {
    margin-right: -0.375rem;
    margin-left: 0.75rem;
}


.modal-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

.offcanvas-header .btn-close {
    padding: 0.5rem 0.5rem;
    margin-top: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}

Reduced test cases

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.1.3

[ffoodd]

What issue do you have? Close buttons seem to work fine—with various positions depending on the component but that's intended (and customizable through Sass).

[ZhangChengLin]

What issue do you have? Close buttons seem to work fine—with various positions depending on the component but that's intended (and customizable through Sass).

When there is only a closing button in Header, the button is closed, not on the right.

[ffoodd]

Would you mind providing a reduced test case on CodePen or something, please?

[ZhangChengLin]

Would you mind providing a reduced test case on CodePen or something, please?

https://codepen.io/zhangchenglin/pen/YzrvmMR?editors=1000

1 × 2 √

Currently, there is no right positioning of the close button in the title like other components. Other components that contain the close button, such as modal and offcanvas, position the close button to the right.

[mdo]

Agreed this is inconsistent. The demo markup in our docs breaks though with adding margin-left: auto a la close buttons elsewhere. I'll need to work out a fix there, too. Open to suggestions.

[DigitalSolo]

Still an issue.

[davidsilva]

Would it work to give <Toast.Header> justify-content: space-between? It works in my case, where I have a string, e.g., "Success," I want flush left and want the close "X" flush right.