Bootstrap 5 Close Button
The Bootstrap 5 Close Button is a pre-styled dismissal control rendered as a transparent button with an embedded × icon, built using a CSS mask rather than an icon font. It is used wherever users need to explicitly dismiss or close a UI element — modals, alerts, offcanvas panels, and toast notifications. Bootstrap ships it as a standalone component so it can be dropped into any container without pulling in additional dependencies.
Primary Class
.close-buttonCommon Use Cases
- →Dismissing a cookie consent alert banner fixed to the bottom of the viewport
- →Closing an offcanvas navigation drawer on mobile when the user taps outside or finishes browsing
- →Allowing users to manually dismiss a toast notification confirming a successful form submission
- →Removing individual filter tags from a search results interface where each tag has its own close control
Variants & Classes
| Variant | Description |
|---|---|
| Close Button Default | Standard close button with Bootstrap's default styling. |
| Close Button Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Session expiring soon.</strong> Your session will expire in 5 minutes. Save your work to avoid losing changes. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <!-- Standalone close button (disabled state) --> <button type="button" class="btn-close" aria-label="Close"></button> <button type="button" class="btn-close" disabled aria-label="Close"></button> <!-- White variant for dark backgrounds --> <div class="bg-dark p-3 d-inline-block rounded"> <button type="button" class="btn-close btn-close-white" aria-label="Close"></button> </div>
Live Examples
Basic Close Button
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated close button with custom colours
- ✓Close Button with interactive states
- ✓Responsive close button for all screen sizes
Best Practices
Always include aria-label="Close"
The close button renders no visible text, so screen readers have nothing to announce without the aria-label attribute. Bootstrap's own docs require it, and omitting it will fail WCAG 2.1 accessibility audits.
Use btn-close-white on dark surfaces
The default close button uses a dark × icon via CSS mask-image, which is invisible on dark backgrounds. Adding the btn-close-white modifier inverts the icon — use it inside dark alerts, dark modals, or any container with a dark background color.
Pair data-bs-dismiss with the correct parent selector
Bootstrap's dismiss plugin walks up the DOM to find the closest element matching the component type (alert, modal, toast). If your close button is nested inside a custom wrapper between the button and the dismissible parent, the plugin may not find it — keep the nesting shallow or trigger dismissal manually via JavaScript.
Disable the button during async operations
If closing triggers an API call (e.g. marking a notification as read), add the disabled attribute immediately on click to prevent double-submission. Re-enable or remove the element once the request resolves.