Bootstrap | Close Icon for dismissing content with Examples

The close icon in bootstrap is a utility, that is used to dismiss any content (e.g., Alerts, Modals, Popovers). It is represented by a generic cross/close icon.

Below is a sample HTML code including a close icon for dismissing content in bootstrap:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html>
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">        
          
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, 
             then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <title>Close Icon!</title>
    </head>
      
    <body class="container mt-5">
          
        <!--Close Icon-->
        <button type="button" class="close">
        <span>×</span>
        </button>
      
    </body>
</html>                    

chevron_right


Note: The data-dismiss attribute can be used with button tag to target the component to dismiss such as a modal or an alert.



Close icon to dismiss Alert


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
          
        <!-- Include JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  
        <style media="screen">
            h1{
            color:green;
            font-weight: bold;}
        </style>
          
        <title>Close Icon!</title>
    </head>
      
    <body class="container">
        <h1>This is GeeksforGeeks!</h1>
          
        <!--Alert-->
        <div class="alert alert-success alert-dismissible 
            fade show w-50" role="alert">
              
            <strong>Hello geeks!</strong>
              
            <!--Close Icon-->
            <button type="button" class="btn close" 
                data-dismiss="alert" aria-label="Close">
                  
                <span aria-hidden="true">×</span>
            </button>
        </div>
    </body>
</html>                    

chevron_right


Output:
Before:

After:

Close icon to dismiss Modal


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
          
        <style media="screen">
            h1{
            color:green;
            font-weight: bold;}
        </style>
          
        <title>Close Icon!</title>
          
        <!-- Include JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </head>
      
    <body class="container mt-5">
          
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success"
            data-toggle="modal" data-target="#geekymodal">
            Click here to launch modal!
        </button>
          
        <!-- Modal -->
        <div class="modal fade" id="geekymodal" 
            tabindex="-1" role="dialog" aria-labelledby="geekymodal" 
                aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                          
                        <h1 class="modal-title">
                            GeeksforGeeks!
                        </h1>
                          
                        <!--Close Icon-->
                        <button type="button" class="btn close" 
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                      
                    <div class="modal-body">
                        Hey geeks, You're Welcome!
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>                    

chevron_right


Output:
Before:

After:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.