Skip to content
Related Articles

Related Articles

Improve Article
Bootstrap 5 | Close button
  • Last Updated : 23 Jul, 2020

Bootstrap 5 provides a new component which is a Close button which can be used for dismissing content like modals and alerts. It can be included in the webpage using bootstrap.js or bootstrap.min.js. This component can be combined with models, alerts, and popovers. Disabled close buttons have pointer-events: none; applied to, preventing hover and active states from triggering.

Example:




<!DOCTYPE html>
<html>
    <head>
        <title>
            Bootstrap 5 | Close button
        </title>
  
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous">
      </script>
        <script src=
                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>

Output:

Reference: https://v5.getbootstrap.com/docs/5.0/components/close-button/




My Personal Notes arrow_drop_up
Recommended Articles
Page :