Bootstrap 5 Close button Disabled state
Last Updated :
21 Nov, 2022
Bootstrap 5 Close button Disabled state is used to disable the close button for dismissing content like modals and alerts. The disabled close button changes the opacity and removes the pointer cursor on hovering.
Close Button Disabled State used Attribute:
- <disabled: The disabled attribute is used to disable the close button.
Syntax:
<button type="button" class="btn-close"
disabled aria-label="Close">
...
</button>
Example 1: In this example, we will create a simple disabled button.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Close button Disabled state</h3>
<span>I am disabled Close Button</span>
<button type="button"
class="btn-close"
disabled aria-label="Close">
</button>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use a disabled close button in a Modal.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Close button Disabled state</h3>
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#GFG">
Launch GFG modal
</button>
<div class="modal fade" id="GFG">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Close button Disabled state
</h5>
<button type="button" class="btn-close"
disabled aria-label="Close">
</button>
</div>
<div class="modal-body">
This modal has disabled
closed button
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/components/close-button/#disabled-state
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...