Close button
A generic close button for dismissing content like modals and alerts.
Example
Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.
Disabled state
Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.
Dark variant
Deprecated in v5.3.0Heads up! As of v5.3.0, the .btn-close-white class is deprecated. Instead, use data-bs-theme="dark" to change the color mode of the close button.
Add data-bs-theme="dark" to the .btn-close, or to its parent element, to invert the close button. This uses the filter property to invert the background-image without overriding its value.
CSS
Variables
Added in v5.3.0 As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on .btn-close for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.