BootstrapHow-ToBeginner · 3 min read

How to Create Toggle Button in Bootstrap Easily

To create a toggle button in Bootstrap, use a button element with the data-bs-toggle="button" attribute and the class btn. This makes the button toggle its active state on click, changing its appearance automatically.

📐

Syntax

The basic syntax for a Bootstrap toggle button uses a button element with the btn class for styling and the data-bs-toggle="button" attribute to enable toggle behavior. Optionally, you can add aria-pressed for accessibility and active class to set the initial state.

button: The clickable element.
btn: Bootstrap button styling.
data-bs-toggle="button": Enables toggle functionality.
aria-pressed: Indicates toggle state for screen readers.
active: Sets the button as toggled on initially.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">Toggle Button</button>

Output

A blue button labeled 'Toggle Button' that changes style when clicked to show active state.

💻

Example

This example shows a toggle button that changes its appearance when clicked. It uses Bootstrap 5 classes and attributes to handle the toggle state automatically without extra JavaScript.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Toggle 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 py-5">
    <button type="button" class="btn btn-success" data-bs-toggle="button" aria-pressed="false">
      Toggle Me
    </button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A green button labeled 'Toggle Me' that toggles between normal and pressed styles each time you click it.

⚠️

Common Pitfalls

Common mistakes when creating toggle buttons in Bootstrap include:

Forgetting to include Bootstrap's JavaScript bundle, which is required for toggle behavior.
Using data-toggle instead of data-bs-toggle in Bootstrap 5, which breaks the toggle functionality.
Not setting type="button" on the button, which can cause unexpected form submissions if inside a form.

html

<!-- Wrong: missing Bootstrap JS and wrong attribute -->
<button type="button" class="btn btn-primary" data-toggle="button">Wrong Toggle</button>

<!-- Right: correct attribute and JS included -->
<button type="button" class="btn btn-primary" data-bs-toggle="button">Correct Toggle</button>

Output

The first button will not toggle because it lacks proper attribute and JS; the second toggles correctly.

📊

Quick Reference

Attribute/Class	Purpose
btn	Applies Bootstrap button styles
btn-primary / btn-success / etc.	Sets button color style
data-bs-toggle="button"	Enables toggle behavior
aria-pressed	Accessibility state for toggle
active	Sets button as toggled on initially
type="button"	Prevents form submission on click

✅

Key Takeaways

Use data-bs-toggle="button" with btn class to create toggle buttons in Bootstrap.

Always include Bootstrap's JavaScript bundle for toggle functionality to work.

Set type="button" on toggle buttons to avoid form submission issues.

Use aria-pressed for better accessibility support.

Remember to use Bootstrap 5 syntax with data-bs-toggle, not the older data-toggle.