Converting Checkboxes to Toggles with Bootstrap Toggle

Here at we want to make sure that we have content for everyone. You will certainly find tutorials, blog posts, resources, and videos that require no coding knowledge. However, you will also find plenty of articles and resources for the advanced user as well. We break all of our content into different levels. You can read about our levels and see the difficulty of this post below.

No Code

You don't need to know anything about code. We'll provide you resources and you can use web apps and tools we recommend and just follow along.

Low Code

You don't need to know how to code, but there might be a few lines of it in the tutorial. You will copy and paste and replace some values.

Some Code

You need to know a little but about how code works. You have an understanding of the concepts and are ready to customize settings using code.

Hold on to your butts

OMG. THIS IS COMPLICATED!! We're going to dive deep and build complicated items and workflows with nocode tools & you need a good grasp on code.


  • This project is cloneable in Webflow - find it here.
  • There are 3 external code snippets & stylesheets being referenced within the Page's Custom Code settings:
  1. Disabled Styles [OPTIONAL] - The styles relate to the :disabled state of the toggle switch. If you have any desire to disable the toggle (making them unclickable), I recommend including this or forking it (copying and creating your own version) in Github. Otherwise, you can remove it!
  2. Bootstrap Toggle Styles [REQUIRED]
  3. Bootstrap Toggle's Javascript Library [REQUIRED]

While building a side project recently, I found myself needing to incorporate a "switch" of sorts within my web app — ideally it would be a toggle switch. With Webflow, this isn't a native option but you can get pretty damn close with a few different methods:

  • Use IX 2.0: You can create a checkbox element, set the opacity to 0, and create your own version of a toggle in Webflow. Check out this cloneable project from the great Sidney Ottelohe for help!
  • Use Lottie: Admittedly, I have no experience with Lottie, but you should be able to use Lottie to animate a checkbox element.
  • Use Bootstrap Toggle: Bootstrap Toggle automatically converts checkboxes to toggles with ease. This method is my preferred method, as I think it's really easy to get up-and-running in minimal time without sacrificing any functionality.

I stumbled across Bootstrap Toggle while working on my side project. As I said above, it's a Javascript library that was intended to convert checkbox elements to (functioning!) toggle switches. It was originally intended to work within projects using the official Bootstrap styles, but I wanted to extend this a little further and allow Webflow users to create their own version of Bootstrap Styles visually and achieve the same functionality with minimal programming knowledge required.

So... we built it! You can see and clone the project into your Webflow Dashboard here, but let's get into what you need if you're building your project from scratch.

Step 1: Include the Code Snippets

On the page containing the checkboxes that you want to turn into toggles, paste in the following code into the {% code-line %}Before < / body > tag{% code-line-end %} area:

{% code-block language="html" %}
<link href="" rel="stylesheet">
<!--- The above stylesheet is an OPTIONAL file in your final project. It contains styles relating to the :disabled state, which is shown to the enduser IF a toggle is disabled. We unfortunately can't style the :disabled statein Webflow natively (yet!), which is why we have to hand-write these styles.If you don't care for the :disabled state, then we would recommend deleting thisreference! Learn more about the disabled state here:>
<link href="" rel="stylesheet">
<script src=""></script>
{% code-block-end %}

{% code-block language="hmtl" %}
var Webflow = Webflow || [];
Webflow.push(function () {
{% code-block-end %}

There's a few different pieces here, so let's address each piece-by-piece:

  • Disabled Styles: {% code-line %}<link href="" rel="stylesheet">{% code-line-end %} - This is an optional inclusion relating to the styles of the {% code-line %}:disabled{% code-line-end %} state of a toggle. If you have a desire to disable toggles at any time (make them untoggleable, if that's a word)
  • Bootstrap Toggle's CSS: {% code-line %}Bootstrap Toggle's CSS: <link href="" rel="stylesheet">{% code-line-end %} - as per Bootstrap Toggle's documentation, this is a required inclusion.
  • Bootstrap Toggle's Javascript File: {% code-line %}<script src=""></script>{% code-line-end %} - this is where the real meat-and-potatoes of Bootstrap Toggle come into play. We don't need to worry about how this works (just that it's the piece that converts checkboxes to toggles), but note that this is a required inclusion.
  • All of the Javascript Functions after the above — this is most definitely optional and mainly included to show you (in our cloneable project) that the toggle element is accessible via Javascript and what methods exist, as per the documentation, so if you're at all interested in controlling the toggle with Javascript/jQuery, these snippets show you give you the run-down.

Step 2: Copy the Style Guide OR Include Bootstrap Styles

Bootstrap Toggle works by using Bootstrap's style sheet to style the toggle elements themselves. You've got two options when it comes to how you want to style the toggles:

(1) USE VISUAL STYLES (within Webflow)

If you don't want to have to adhere to Bootstrap Styles and want to control the specifics of how your toggles look, we recommend simply copy-and-pasting the style guide from our cloneable project into yours. Cross-project copy-and-paste only works if you have cloneable the project yourself (doesn't work on read-only links), so be sure you clone it first.

IMPORTANT: If you do this, make sure that you are not using any of the following classes in your project, as they're required for Bootstrap Toggle:

{% code-line %}btn{% code-line-end %}, {% code-line %}.btn-primary{% code-line-end %}, {% code-line %}.btn-secondary{% code-line-end %}, {% code-line %}btn-success{% code-line-end %}, {% code-line %}.btn-info{% code-line-end %}, {% code-line %}.btn-warning{% code-line-end %}, {% code-line %}.btn-danger{% code-line-end %}, {% code-line %}.btn-light{% code-line-end %}, and {% code-line %}.btn-dark{% code-line-end %} .

The style guide itself is closely matched to Bootstrap's Default Colors to begin with, with each color being created as what's known as a Global Swatch in Webflow. Global Swatches allow you to change the color in one place (the style panel) and have the change reflected site-wide on EVERY element using that color swatch. It's incredible when it comes to saving time.

Furthermore, most colors you see here have a similar (but noticeably different) color pair — this is used for the {% code-line %}:hover{% code-line-end %} state on the toggles! You can alter this via the style panel as well. (How do I access and style the hover state?)

(2) USE BOOTSTRAP STYLES (Bootstrap Default)

If you like Bootstrap's Default Styles, have no intention of changing them, and want to include just get started without having to do cross-site copy-and-paste, replace the FIRST {% code-line %}< link >{% code-line-end %} element listed above (the element) with the following:

{% code-block language="html" %}
<link href="" rel="stylesheet">
{% code-block-end %}

This style sheet excludes pretty much every default Bootstrap Style that you DON'T need for Bootstrap Toggle. This step and file is required if you do not copy-and-paste the style guide from our project. If you see a line (or lines) of CSS that can be removed even more, let us know or create a pull request on Github.

Step 3: Create the Checkbox/Toggle!

This is pretty much the final step! Drag an {% code-line %}Embed{% code-line-end %} element onto the page and inside of it, add the following code at a minimum:

{% code-block language="html" %}
<input type="checkbox" data-toggle="toggle">
{% code-block-end %}

The {% code-line %}data-toggle="toggle"{% code-line-end %} attribute is incredibly important here, as that's how Bootstrap Toggle knows what checkboxes to convert to toggles and which ones to leave alone. You MUST have this attribute on any checkbox element you want converted to a toggle.

There are also other attributes you can add to the {% code-line %}< input >{% code-line-end %} element to extend the functionality / design:

  • Colors: Add the {% code-line %}Data-onstyle=“CLASS"{% code-line-end %} — any of the following can be used:

    {% code-line %}data-onstyle="primary"{% code-line-end %},
    {% code-line %}data-onstyle="success"{% code-line-end %},
    {% code-line %}data-onstyle="info"{% code-line-end %},
    {% code-line %}data-onstyle="warning"{% code-line-end %},
    {% code-line %}data-onstyle="danger"{% code-line-end %}, and
    {% code-line %}data-onstyle="default"{% code-line-end %}
  • Mixing Colors: If you like one of the above colors for the ON state but another for the OFF state, you can mix-and-match colors! Use the {% code-line %}data-onstyle="COLOR"{% code-line-end %} for the ON style and {% code-line %}data-offstyle="COLOR"{% code-line-end %} for the OFF style.
  • Bootstrap Sizes: You can use {% code-line %}data-size="SIZE"{% code-line-end %} and take advantage of Bootstrap default sizes, passing in either ;{% code-line %}large{% code-line-end %}, {% code-line %}normal{% code-line-end %}, or {% code-line %}small{% code-line-end %}.
  • Custom Sizes: You can also opt to use your own width and height for the toggles by passing in {% code-line %}data-width="NUMBER"{% code-line-end %} and {% code-line %}data-height="NUMBER"{% code-line-end %} respectively, where the number is the pixel value you desire.
  • Custom Text for ON/OFF States: Want to change the text from "On" or "Off"? Add in the {% code-line %}data-on="TEXT FOR ON"{% code-line-end %} and {% code-line %}data-off="TEXT FOR OFF"{% code-line-end %} attributes!
  • Use Multiple Lines of Text: If you want to use a line break element ({% code-line %}< br >{% code-line-end %}), you can! Simply pass in the {% code-line %}< br >{% code-line-end %} itself in the custom string you want to use (see above) and you'll be set.

Example attribute:

{% code-block language="html" %}
data-on="Hello<br>World" data-off="Goodbye<br>World"
{% code-block-end %}

  • Change the Animation Speed of the Toggle: Animation speeds can also be varied using the CSS transition property. You must first declare the speed as a custom style (see cloneable project for more examples), and then pass Speed to the checkbox using the {% code-line %}data-style{% code-line-end %} attribute. For example, this would all be in one {% code-line %}embed{% code-line-end %} element for slow animation speeds:

{% code-block language="html" %}
     .slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
<input type="checkbox" checked data-toggle="toggle" data-style="slow" data-on="Slow" data-off="Speed">
{% code-block-end %}


The full documentation talks about more potential attributes you can add, so feel free to scan through that and add any attributes you'd like.

I hope this helps! All credit to the original maker of Bootstrap Toggle, Min Hur for The New York Times, for making this awesome library.

About the Author
Matt Varughese
Founder + Business Director, @Websterpeace

Have some feedback on our blog post? Join the conversation below and become a part of our community. We love to talk about building with no-code and we'd love to chat.

Or you can hit me up on Twitter
and we can chat there.

Also, don't forget to listen to our latest episodes and subscribe to our podcast. We release new episodes and resources every week.