Bootstrap 5 proporciona un nuevo componente que es un botón Cerrar que se puede usar para descartar contenido como modales y alertas. Se puede incluir en la página web usando bootstrap.js o bootstrap.min.js . Este componente se puede combinar con modelos, alertas y popovers. Los botones de cierre deshabilitados tienen eventos de puntero: ninguno; aplicado, evitando que se disparen los estados activo y flotante.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Close button </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script> </head> <body style="text-align: center;"> <div class="container mt-3"> <h1 style="color: green;"> GeeksforGeeks </h1> Close icon <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> <br/> Close disabled icon <button type="button" class="close" aria-label="Close" disabled> <span aria-hidden="true">×</span> </button> </div> </body> </html>
Producción:
Reference: https://v5.getbootstrap.com/docs/5.0/components/close-button/