Bootstrap | Close Icon for dismissing content with Examples
Last Updated :
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>
<title>Close Icon!</title>
</head>
<body class="container mt-5">
<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.
Close icon to dismiss Alert
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<style media="screen">
h1{
color:green;
font-weight: bold;}
</style>
<title>Close Icon!</title>
</head>
<body class="container">
<h1>This is GeeksforGeeks!</h1>
<div class="alert alert-success alert-dismissible
fade show w-50" role="alert">
<strong>Hello geeks!</strong>
<button type="button" class="btn close"
data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
</html>
|
Output:
Before:
After:
Close icon to dismiss Modal
Example:
html
<!DOCTYPE html>
<html>
<head>
<style media="screen">
h1{
color:green;
font-weight: bold;}
</style>
<title>Close Icon!</title>
</head>
<body class="container mt-5">
<button type="button" class="btn btn-success"
data-toggle="modal" data-target="#geekymodal">
Click here to launch modal!
</button>
<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>
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...