Bootstrap 5 Buttons Disabled state
Last Updated :
07 Nov, 2022
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
GeeksforGeeks
</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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">
GeeksforGeeks
</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
Similar Reads
Bootstrap 5 Buttons Disable text wrapping Bootstrap 5 Buttons Disable text wrapping is used if you don't want to wrap the button text. To disable the button text wrapping, we will use .text-nowrap class with .btn class. You can also use $btn-white-space: nowrap in SASS to disable text wrapping in each button.Buttons Disable text wrapping us
2 min read
Bootstrap 5 Buttons Button tags Bootstrap 5 Buttons Button tags are used to create buttons using <a>, <button>, and <input> elements. To design the button tags, we will use .btn class. After applying the .btn class on <a>, <button>, and <input> elements, browsers can render the elements in sligh
2 min read
Bootstrap 5 Button Outline Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline b
2 min read
Bootstrap 5 Buttons Sizes Bootstrap 5 provides 2 different classes that allow changing the button sizes. The .btn-lg and .btn-sm classes are used for large and small buttons. Buttons Sizes Classes: .btn-lg: This class is used to create large-size buttons..btn-sm: This class is used to create small-size buttons. Syntax: // Fo
2 min read
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 cr
3 min read
Bootstrap 5 Buttons Block buttons Bootstrap 5 Block buttons are used to display the full-width responsive buttons. To make the block buttons, we will use .d-grid, and .d-flex classes. We can also use screen sizes classes to change the button sizes on different screen sizes.Block buttons used Classes:.d-flex: This class is used to di
2 min read
Bootstrap 5 Button Plugin Bootstrap 5 buttons plugin gives the flexibility to play around with setting the toggle states and also with adding certain predefined button methods which help to add utility to the button or even the ability to operate even outside the actual button.Bootstrap 5 Button plugin used classes for toggl
3 min read
Bootstrap 5 Button Methods Bootstrap 5 has specially designed buttons that can be used in different utilities and the buttons can be used. To customize the usage of a user predefined methods can be used with JavaScript. The Button Methods with their function are given below:Bootstrap 5 Buttons Methods:toggle(): It changes the
3 min read
Bootstrap 5 Buttons SASS Bootstrap 5 Buttons SASS can be used to change the default values provided for the buttons by customizing scss file of bootstrap 5.SASS variables of Buttons:$btn-padding-y: This variable provides the top and bottom padding of the button. By default, it is 0.375rem.$btn-padding-x: This variable provi
7 min read