Bootstrap 5 Buttons Disabled state
The disabled option is used to create a button with the disabled state. It is a boolean attribute for any button element. The disabled button means the button is inactive and it will not be active after clicking or hovering the button.
Disabled state Attribute:
- disabled: This attribute is used to create the disabled state button. This attribute makes the pointer-events: none to prevent the hover and active states from triggering.
Disabled state Class:
- .disabled: This class is used to create the disabled button.
Note: Since, <a> tag does not support the disabled attribute, so we will use the disabled class to disable the <a> element button. The disabled <a> element should include aria-disabled=”true” attribute to represent the state of the element.
Syntax:
// Disabled Button <button type="button" class="btn btn-*" disabled> Disabled button </button> // Disabled Link <a href="#" class="btn btn-* disabled" tabindex="-1" role="button" aria-disabled="true"> Disabled link </a>
Example 1: In this example, we will use the disabled attribute to disable the buttons.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Disabled state</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Disabled state</ h2 > < h3 >Disabled Buttons</ h3 > < button type = "button" class = "btn btn-primary" disabled> Primary Disabled Button </ button > < button type = "button" class = "btn btn-secondary" disabled> Secondary Disabled Button </ button > < button type = "button" class = "btn btn-success disabled" > Success Disabled Button </ button > < button type = "button" class = "btn btn-danger disabled" > Danger Disabled Button </ button > < br >< br > < h3 >Active Buttons</ h3 > < button type = "button" class = "btn btn-warning" > Warning Active Button </ button > < button type = "button" class = "btn btn-info" > Info Active Button </ button > < button type = "button" class = "btn btn-light" > Light Active Button </ button > < button type = "button" class = "btn btn-dark" > Dark Active Button </ button > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will use the .disabled class to disable the anchor link buttons.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap 5 Buttons Disabled state</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body style = "text-align:center;" > < div class = "container mt-3" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Buttons Disabled state</ h2 > < h3 >Disabled Links as Buttons</ h3 > < a href = "#" class = "btn btn-primary disabled" tabindex = "-1" role = "button" aria-disabled = "true" > Primary Disabled link </ a > < a href = "#" class = "btn btn-secondary disabled" tabindex = "-1" role = "button" aria-disabled = "true" > Secondary Disabled link </ a > < a href = "#" class = "btn btn-success disabled" tabindex = "-1" role = "button" aria-disabled = "true" > Success Disabled link </ a > < a href = "#" class = "btn btn-danger disabled" tabindex = "-1" role = "button" aria-disabled = "true" > Danger Disabled link </ a > < br >< br > < h3 >Active Links as Buttons</ h3 > < a href = "#" class = "btn btn-warning" tabindex = "-1" role = "button" aria-disabled = "false" > Warning Active link </ a > < a href = "#" class = "btn btn-info" tabindex = "-1" role = "button" aria-disabled = "false" > Info Active link </ a > < a href = "#" class = "btn btn-light" tabindex = "-1" role = "button" aria-disabled = "false" > Light Active link </ a > < a href = "#" class = "btn btn-dark" tabindex = "-1" role = "button" aria-disabled = "false" > Dark Active link </ a > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/buttons/#disabled-state
Contact Us