Important Notes

This cloneable project is just a Webflow-centric version of the official Bootstrap Toggle documentation, intended to get you up-and-running super quickly. All credit goes to the original maker, Min Hur!

The official docs will have more detail than is provided here, so if you're wanting to learn more, visit the documentation here.

Lastly, you can modify almost all of the styles you see here visually by adjusting the style guide below. Enjoy!

Access the style guideFull Tutorial

Converting Checkboxes > Toggles

The bare minimum of converting a checkbox to a toggle switch — just pass data-toggle="toggle" as an attribute in the checkbox and Bootstrap Toggle will kick in! NOTE: This attribute is required on ALL checkbox elements that you want to be converted into toggles.

Using Bootstrap Colors

Bootstrap Toggle supports the usage of Bootstrap Color Styles, like Primary, Success, Info, Warning, Danger, and Default.

Using Bootstrap Sizes

Bootstrap Toggle also supports the usage of Bootstrap Sizes — Large, Normal, and Small. (Mini was acting odd, so it was excluded here.)

Customizing Toggle Sizes

Want to use a custom size? Simply set the width and/or height as an attribute — data-width and data-height, respectively — and you'll be all set.

Mixing Bootstrap Colors

If you want to use two different Bootstrap Colors, you can totally do that by setting a data-onstyle attribute and a data-offstyle attribute for your ON style and your OFF style, respectively.

Showing Custom Text

Change text from ON/OFF to whatever you'd like by specifying it with two attributes: data-on and data-off.

Multiple Lines of Text

Want to use line breaks on your toggles? Easy — just use a <br> tag (HTML Line Break) within your data-on and data-off attributes.

Changing Animation Speeds

Animation speeds can also be varied using the CSS transition property. Take note of the declaration of three different speeds in the checkbox embeds below. Speed is passed to the checkbox using the data-style property.

Using Bootstrap Toggle Methods

Controlling the Toggle Elements you want is incredibly easy by using Bootstrap Toggle methods. In this instance, we gave our checkbox an ID of toggle-demo. Please note that the functions that power these buttons are in the custom code settings of this page.

Method
Example
Description
Demo

on

$('#toggle-demo').bootstrapToggle('on')

Sets the toggle to 'On' state.

On

off

$('#toggle-demo').bootstrapToggle('off')

Sets the toggle to 'Off' state

Off

toggle

$('#toggle-demo').bootstrapToggle('toggle')

Toggles the state of the toggle

Toggle

enable

$('#toggle-demo').bootstrapToggle('enable')

Enables the toggle

Enable

disable

$('#toggle-demo').bootstrapToggle('disable')

Disables the toggle

Disable