Skip to content
Related Articles
Open in App
Not now

Related Articles

Bootstrap 5 | Close button

Improve Article
Save Article
  • Last Updated : 05 May, 2022
Improve Article
Save Article

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:

HTML




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

Start Your Coding Journey Now!