Bootstrap | Close Icon for dismissing content with Examples

17 Jul, 2021
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: 
html
<!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>                   
Note: The data-dismiss attribute can be used with a button tag to target the component to dismiss such as a modal or an alert. 
Example:  
html
<!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>                   
Output: Before:  
After:  
 
Example:  
html
<!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>                   
Output: Before:  
After:  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.