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

Change the default .btn-close to be white with the .btn-close-white class. This class uses the backdrop-filter property to invert the background-image.

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

Thank you for creating with Falcon |
2021 © Themewagon

v3.4.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