Bootstrap - Bootstrap Close Button

The Bootstrap Close Button is a small, reusable user-interface component used to dismiss or close temporary elements such as alerts, modals, offcanvas panels, and other dismissible components. Instead of creating a close icon and styling it manually with CSS, Bootstrap provides the btn-close class. It creates a standard close button with a familiar “X” appearance and includes built-in styling that works well with Bootstrap components.

1. Basic Close Button

The simplest way to create a Bootstrap close button is to use the btn-close class with a <button> element.

<button type="button" class="btn-close" aria-label="Close"></button>

The type="button" attribute ensures that the button does not accidentally submit a form when it is placed inside a form. The aria-label="Close" attribute provides an accessible name for screen readers because the button itself does not contain visible text.

2. How the Close Button Works

The btn-close class provides the visual appearance of the close button. Bootstrap uses CSS to create the familiar X-shaped design rather than requiring developers to insert an image or special character manually.

For example:

<div>
    <button type="button" class="btn-close" aria-label="Close"></button>
</div>

The button can be placed inside different Bootstrap components. However, adding the btn-close class by itself does not automatically make every custom element disappear. For components such as alerts, modals, and offcanvas panels, Bootstrap's JavaScript functionality and appropriate data attributes are used to provide the dismiss behavior.

3. Close Button with an Alert

A common use of the close button is inside a dismissible Bootstrap alert. The alert-dismissible class provides the appropriate positioning, while data-bs-dismiss="alert" tells Bootstrap that clicking the button should dismiss the alert.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    Your session will expire soon.

    <button type="button"
            class="btn-close"
            data-bs-dismiss="alert"
            aria-label="Close">
    </button>
</div>

Here, several Bootstrap classes work together:

• alert creates the alert component.

• alert-warning gives the alert a warning style.

• alert-dismissible prepares the alert to be dismissed.

• fade show provides a transition effect.

• btn-close creates the close button.

• data-bs-dismiss="alert" connects the button to the alert's dismissal behavior.

• aria-label="Close" makes the button understandable to assistive technologies.

4. Close Button in a Modal

The close button is also commonly used in Bootstrap modals. A modal may contain a close button in its header.

<div class="modal-header">
    <h5 class="modal-title">User Information</h5>

    <button type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close">
    </button>
</div>

The important attribute here is:

data-bs-dismiss="modal"

It tells Bootstrap's JavaScript to close the currently displayed modal when the button is clicked.

5. Close Button in an Offcanvas Component

The same approach can be used with an offcanvas component.

<div class="offcanvas-header">
    <h5 class="offcanvas-title">Menu</h5>

    <button type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"
            aria-label="Close">
    </button>
</div>

In this example, data-bs-dismiss="offcanvas" connects the button to the offcanvas component.

This demonstrates one of the useful features of Bootstrap: the same btn-close styling can be reused across different components, while the data-bs-dismiss attribute determines which component should be closed.

6. Dark Close Button

Bootstrap also provides support for displaying the close button against darker backgrounds. The btn-close-white class was used in older Bootstrap versions, while newer Bootstrap versions provide the data-bs-theme="dark" approach for component theming.

For example:

<div data-bs-theme="dark">
    <button type="button" class="btn-close" aria-label="Close"></button>
</div>

This is useful when the close button needs to remain visible against a dark background.

7. Disabled Close Button

A close button can also be disabled when the user should not currently be able to perform the closing action.

<button type="button"
        class="btn-close"
        disabled
        aria-label="Close">
</button>

The disabled attribute prevents normal interaction with the button and changes its appearance to indicate that it is unavailable.

8. Accessibility Considerations

Accessibility is particularly important for Bootstrap close buttons because the button normally does not contain visible text.

For example:

<button type="button" class="btn-close" aria-label="Close"></button>

The aria-label attribute tells screen readers what the button does. Without an accessible name, a screen-reader user may have difficulty understanding the purpose of the control.

Using a real <button> element is also preferable to creating a clickable <div> because buttons provide appropriate keyboard and accessibility behavior.

9. Customizing the Close Button

Bootstrap allows developers to customize the appearance of the close button using CSS variables and surrounding styles. For example, developers may change its size or appearance depending on the design requirements.

A custom class can be added alongside btn-close:

<button type="button"
        class="btn-close custom-close"
        aria-label="Close">
</button>

Custom CSS can then be applied to .custom-close without removing Bootstrap's basic close-button functionality.

10. Practical Example

The following example combines a dismissible alert with a Bootstrap close button:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Close Button</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>

<body>

<div class="container mt-4">

    <div class="alert alert-success alert-dismissible fade show" role="alert">
        Your registration was completed successfully.

        <button type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="Close">
        </button>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

When the page is opened, the alert is displayed with a close button. Clicking the button causes Bootstrap's JavaScript to dismiss the alert.

11. Important Attributes and Classes

Conclusion

The Bootstrap Close Button provides a consistent and accessible way to create controls for dismissing temporary interface elements. The btn-close class handles the visual appearance, while Bootstrap's data-bs-dismiss attributes connect the button to components such as alerts, modals, and offcanvas panels. Using an appropriate <button> element together with aria-label also helps maintain good accessibility practices. This makes the close button a simple but useful Bootstrap component for building interactive web interfaces.