Bootstrap 4 Toggle is a nifty plugin/widget that transforms a regular checkbox into a sleek toggle switch. This can add a modern flair to your forms and improve user experience. In this article, we’ll guide you through the installation and usage of Bootstrap 4 Toggle so you can get started immediately.

Installation

There are various ways to install Bootstrap 4 Toggle in your project, including via CDN, NPM, or Yarn. Below are the detailed instructions:

CDN

To include Bootstrap 4 Toggle via CDN, add the following lines to the head section of your HTML file:

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

Download

You can also download the latest release from the GitHub Release Page.

NPM

Run the following command to install Bootstrap 4 Toggle using NPM:

npm install bootstrap4-toggle

Yarn

Alternatively, you can use Yarn to add Bootstrap 4 Toggle:

yarn add bootstrap4-toggle

Usage

Once installed, you can use Bootstrap 4 Toggle by initializing it with HTML or JavaScript.

Initialize With HTML

To automatically convert a plain checkbox, simply add `data-toggle=”toggle”` to the input element. Here’s an example:

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

Initialize With Code

If you want to initialize the toggle with JavaScript, you can do it like this:

<input id="chkToggle" type="checkbox" checked>
<script>
$(function() {
    $('#chkToggle').bootstrapToggle();
});
</script>

API

Bootstrap 4 Toggle comes with several options and methods to customize your toggle switches:

Options

You can pass options via data attributes or through JavaScript. Here’s an example of using data attributes:

<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">

Options List

• on: Text displayed for the “On” state (default: “On”)
• off: Text displayed for the “Off” state (default: “Off”)
• size: Size of the toggle (options: large, normal, small, mini)
• onstyle: Style of the “On” toggle (options: primary, secondary, etc.)
• offstyle: Style of the “Off” toggle (default: “light”)

Methods

Bootstrap 4 Toggle supports various methods for direct control:

$('#toggle-demo').bootstrapToggle(); // Initializes the toggle
$('#toggle-demo').bootstrapToggle('destroy'); // Destroys the toggle
$('#toggle-demo').bootstrapToggle('on'); // Sets the toggle to "On"
$('#toggle-demo').bootstrapToggle('off'); // Sets the toggle to "Off"

Events

You can also listen to events that propagate from input elements to the toggle. Here’s how:

$('#toggle-event').change(function() {
    $('#console-event').html('Toggle: ' + $(this).prop('checked'));
});

Troubleshooting

If you encounter issues during implementation, consider the following:

• Ensure jQuery is included before Bootstrap 4 Toggle in your project.
• Check for any JavaScript errors in the console that might interrupt execution.
• Confirm that the correct paths have been set for CSS and JS files if you’re using CDN or local files.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.