Close button

A generic close button for dismissing content like modals and alerts.

Close Button on Bootstrap
Close button

Be sure to include text for screen readers, as we’ve done with aria-label. Disabled close buttons have pointer-events: none and user-select: none applied to, preventing hover and active states from triggering.

<div class="rounded-1 p-3">
  <button class="btn-close" type="button" aria-label="Close"></button>
  <button class="btn-close" type="button" disabled="" aria-label="Close"></button>
</div>
Close button white variant

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.

<div class="bg-1000 rounded-1 p-3" data-bs-theme="light">
  <div data-bs-theme="dark">
    <button class="btn-close" type="button" aria-label="Close"></button>
    <button class="btn-close" type="button" disabled="" aria-label="Close"></button>
  </div>
</div>

Thank you for creating with Falcon |
2023 © Themewagon

v3.18.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize