bootstrap5-toggle

Bootstrap 5 Toggle

Bootstrap 5 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.

---

Library Distributions

Version	Bootstrap Support	Last Release	End of Life
v5
v4
v3

See EOL for each version in Security Policy Page.

Demo and documentation

Please read our documentation page for a completed usage explanation: https://palcarazm.github.io/bootstrap5-toggle/

---

• Installation
  • CDN
    • ECMAS Interface
    • jQuery Interface
  • Download
  • NPM
  • Yarn
• Usage
  • Initialize With HTML
  • Initialize With Code
• Collaborators welcome!

---

Installation

CDN

ECMAS Interface

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.4.1/css/bootstrap5-toggle.min.css"
  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.4.1/js/bootstrap5-toggle.ecmas.min.js"></script>

jQuery Interface

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.4.1/css/bootstrap5-toggle.min.css"
  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@5.4.1/js/bootstrap5-toggle.jquery.min.js"></script>

Download

NPM

npm install bootstrap5-toggle@5.4.1

Yarn

yarn add bootstrap5-toggle@5.4.1

Usage

Initialize With HTML

Add data-toggle="toggle" to automatically convert a plain checkbox into a bootstrap 5 toggle.

<input id="chkToggle" type="checkbox" data-toggle="toggle" />

Initialize With Code

Toggles can also be initialized via JavaScript code.

EX: Initialize id chkToggle with a single line of JavaScript.

<input id="chkToggle" type="checkbox" checked />
<script>
  document.querySelector("#chkToggle").bootstrapToggle();
</script>

Collaborators welcome!

• Do you need some help? Open a thread in GitHub Discussions Q&A
• Do you find a bug? Open an issue in GitHub bug report
• Do you have a great idea? Open an issue in GitHub feature request
• Do you know how to fix a bug? Open a pull request in GitHub pull request.

¿Do you like the project? Give us a in GitHub.