Related Articles

Related Articles

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :