Close button

Close buttons are used by dismissible alerts, modals, offcanvas panels, toasts, and custom controls.

Example

Use <bs-close-button> when a component or custom control needs a compact dismissal affordance. Always provide accessible text with aria-label.

aspnet 

<bs-close-button aria-label="Close" />

Disabled state

Set disabled="true" to render the disabled close button state. Bootstrap reduces opacity and prevents hover or active styling for disabled close buttons.

aspnet 

<bs-close-button disabled="true" aria-label="Close" />

Dark variant

Use Bootstrap color mode attributes on the close button or a parent wrapper when the close icon needs to invert against a dark background.

aspnet 

<bs-div data-bs-theme="dark" bg-color="Dark" padding="Default3">
    <bs-close-button aria-label="Close" />
    <bs-close-button disabled="true" aria-label="Close" />
</bs-div>

Dismissible alert

aspnet 

<bs-alert alert-type="Warning">
    This alert includes a captured close button.
    <bs-close-button aria-label="Close" />
</bs-alert>

CSS

Variables

Close buttons use Bootstrap's local CSS variables for opacity, filter, and background image behavior.

Sass variables

Use Sass customization for global close button dimensions, opacity levels, and background image defaults.