toast close button position

Created by: ZhangChengLin

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

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