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!
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.
Bootstrap Toggle supports the usage of Bootstrap Color Styles, like Primary, Success, Info, Warning, Danger, and Default.
Bootstrap Toggle also supports the usage of Bootstrap Sizes — Large, Normal, and Small. (Mini was acting odd, so it was excluded here.)
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.
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.
Change text from ON/OFF to whatever you'd like by specifying it with two attributes: data-on and data-off.
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.
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.
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.
on
$('#toggle-demo').bootstrapToggle('on')
Sets the toggle to 'On' state.
off
$('#toggle-demo').bootstrapToggle('off')
Sets the toggle to 'Off' state
toggle
$('#toggle-demo').bootstrapToggle('toggle')
Toggles the state of the toggle
enable
$('#toggle-demo').bootstrapToggle('enable')
Enables the toggle
disable
$('#toggle-demo').bootstrapToggle('disable')
Disables the toggle