Close button
A generic close button for dismissing content like modals and alerts.
Close Button on BootstrapExample
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.
<button class="btn-close" type="button" aria-label="Close"></button>
<button class="btn-close" type="button" disabled="" aria-label="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>Close Button in Alert
Holy guacamole! You should check in on some of those fields below.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Close Button in Modal
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#error-modal">Launch demo modal</button>
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 500px">
<div class="modal-content position-relative">
<div class="position-absolute top-0 end-0 mt-2 me-2 z-index-1">
<button class="btn-close btn btn-sm btn-circle d-flex flex-center transition-base" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="rounded-top-lg py-3 ps-4 pe-6 bg-light">
<h4 class="mb-1" id="modalExampleDemoLabel">Add a new illustration </h4>
</div>
<div class="p-4 pb-0">
<form>
<div class="mb-3">
<label class="col-form-label" for="recipient-name">Recipient:</label>
<input class="form-control" id="recipient-name" type="text" />
</div>
<div class="mb-3">
<label class="col-form-label" for="message-text">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary" type="button">Understood </button>
</div>
</div>
</div>
</div>
