Dismiss alerts, dialogs, and other transient content with Bootstrap's native .btn-close.
Use inside alerts, dialogs, toasts, and other dismissible surfaces.
Use .btn-close for dismissing nearby transient content such as alerts, dialogs, toasts, and offcanvas panels. Render the button at the edge of the surface it dismisses, and always provide an accessible name with aria-label because the icon has no visible text.
.btn-close
aria-label
Pair the close button with the matching Bootstrap dismissal behavior for the owning component, such as data-bs-dismiss="alert" or data-bs-dismiss="modal". Use disabled only when dismissal is temporarily unavailable; Bootstrap suppresses pointer and selection behavior for the disabled state.
data-bs-dismiss="alert"
data-bs-dismiss="modal"
disabled
For dark surfaces, prefer data-bs-theme="dark" on the button or parent instead of deprecated color inversion classes. After dismissal, make sure focus lands somewhere sensible when the closed surface contained the active control.
data-bs-theme="dark"
Provide an accessible label; the icon itself carries no visible text.
1 2 3<div class="d-inline-flex"> <button type="button" class="btn-close" aria-label="Close"></button> </div>
<div class="d-inline-flex"> <button type="button" class="btn-close" aria-label="Close"></button> </div>
Disabled close buttons lower opacity and drop pointer and hover interaction.
1 2 3<div class="d-inline-flex"> <button type="button" class="btn-close" aria-label="Close" disabled></button> </div>
<div class="d-inline-flex"> <button type="button" class="btn-close" aria-label="Close" disabled></button> </div>
Pair with a flex row to dismiss a notice, alert, or toast.
1 2 3 4 5 6 7<div class="d-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" style="width: 20rem;"> <div> <div class="fw-medium">Update available</div> <div class="text-body-secondary small">Version 2.1 is ready to install.</div> </div> <button type="button" class="btn-close" aria-label="Close"></button> </div>
<div class="d-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" style="width: 20rem;"> <div> <div class="fw-medium">Update available</div> <div class="text-body-secondary small">Version 2.1 is ready to install.</div> </div> <button type="button" class="btn-close" aria-label="Close"></button> </div>
Compare Arabic, Hebrew, and English close actions in an RTL layout for operations workflows.
1 2 3 4 5 6 7<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="rtl"> <div> <div class="fw-medium">تم تجاهل الحادث</div> <div class="text-body-secondary small">تم مسح تنبيه الحادث.</div> </div> <button type="button" class="btn-close" aria-label="إغلاق"></button> </div>
<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="rtl"> <div> <div class="fw-medium">تم تجاهل الحادث</div> <div class="text-body-secondary small">تم مسح تنبيه الحادث.</div> </div> <button type="button" class="btn-close" aria-label="إغلاق"></button> </div>
1 2 3 4 5 6 7<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="rtl"> <div> <div class="fw-medium">האירוע נסגר</div> <div class="text-body-secondary small">התראת האירוע נוקתה.</div> </div> <button type="button" class="btn-close" aria-label="סגירה"></button> </div>
<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="rtl"> <div> <div class="fw-medium">האירוע נסגר</div> <div class="text-body-secondary small">התראת האירוע נוקתה.</div> </div> <button type="button" class="btn-close" aria-label="סגירה"></button> </div>
1 2 3 4 5 6 7<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="ltr"> <div> <div class="fw-medium">Incident dismissed</div> <div class="text-body-secondary small">The incident alert was cleared.</div> </div> <button type="button" class="btn-close" aria-label="Close"></button> </div>
<div class="d-inline-flex align-items-start justify-content-between gap-3 p-3 rounded-3 border bg-body" dir="ltr"> <div> <div class="fw-medium">Incident dismissed</div> <div class="text-body-secondary small">The incident alert was cleared.</div> </div> <button type="button" class="btn-close" aria-label="Close"></button> </div>
For Bootstrap's source behavior and CSS variables, see the Bootstrap Close button documentation.
No matching pages.
Restore the default appearance.