BootstrapHow-ToBeginner · 3 min read

How to Disable Button in Bootstrap: Simple Guide

To disable a button in Bootstrap, add the disabled attribute to the <button> element. You can also add the disabled class for consistent Bootstrap styling and to prevent user interaction.

📐

Syntax

Use the disabled attribute inside the <button> tag to disable it. Optionally, add the disabled class for Bootstrap styling.

<button disabled>: disables the button functionality.
class="btn disabled": applies Bootstrap's disabled style.

html

<button type="button" class="btn btn-primary disabled" disabled>Disabled Button</button>

Output

A greyed-out button labeled 'Disabled Button' that cannot be clicked.

💻

Example

This example shows a normal Bootstrap button and a disabled Bootstrap button side by side. The disabled button is greyed out and does not respond to clicks.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Disabled Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <button type="button" class="btn btn-primary">Active Button</button>
    <button type="button" class="btn btn-primary disabled" disabled>Disabled Button</button>
  </div>
</body>
</html>

Output

Two buttons appear: a blue 'Active Button' that can be clicked and a greyed-out 'Disabled Button' that cannot be clicked.

⚠️

Common Pitfalls

Common mistakes when disabling buttons in Bootstrap include:

Using only the disabled class without the disabled attribute, which disables styling but not functionality.
Using the disabled attribute without the disabled class, which disables functionality but may not show the correct disabled style.
Trying to disable links (<a>) with disabled attribute, which does not work; use aria-disabled="true" and disabled class instead.

html

<!-- Wrong: only class disables style, button still clickable -->
<button type="button" class="btn btn-primary disabled">Wrong Disabled</button>

<!-- Right: attribute disables functionality and class styles it -->
<button type="button" class="btn btn-primary disabled" disabled>Correct Disabled</button>

Output

The first button looks disabled but can be clicked; the second button looks disabled and cannot be clicked.

📊

Quick Reference

Method	Effect	Usage
disabled attribute	Disables button functionality
disabled class	Applies disabled style
Both together	Disables and styles button properly

✅

Key Takeaways

Always use the disabled attribute to prevent button clicks.

Add the disabled class for consistent Bootstrap disabled styling.

For links, use aria-disabled and disabled class instead of disabled attribute.

Using only class or only attribute can cause styling or functionality issues.

Bootstrap buttons with disabled attribute appear greyed out and are not interactive.