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>
<!-- Load Bootstrap -->
<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>
<!-- Modal -->
<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