Convert Bootstrap checkbox into toggle buttons

Convert Bootstrap checkbox into toggle buttons

The bootstrap-checkbox plug-in enables converting a simple looking checkbox into the beautiful checkboxes that look like a toggle button.

You may increase/decrease the size and add icons to make it more descriptive according to the context.

Demo 1 Demo 2 Demo 3
Source plug-in Download

How to install the bootstrap-checkbox plug-in?

With Bower:

bower install bootstrap-checkbox

By npm:

npm install bootstrap-checkbox

With composer:

composer require vsn4ik/bootstrap-checkbox “dev-master”

Include the plugin JS file

After downloading and extracting the zipped file or installation by above ways, include the JS file in your web page where you intend to use it:

<script src=”js/bootstrap-checkbox/bootstrap-checkbox.js”></script>

(Adjust the path according to your physical directory structure)

Dependency files

As plug-in is based on jQuery and implemented on Bootstrap framework, so you need to include the Bootstrap CSS and jQuery library. You may refer it from the CDN as shown in the demos below.

Using the markup

The markup is simple checkbox code as used in the demos below.

A demo of simple Bootstrap checkbox

In this demo, the default options are used for turning a simple checkbox into a beautiful one. For that, a checkbox is created in the markup section and its ID is referred in the jQuery code to initiate the plug-in:

Bootstrap checkbox toggle

See online demo and code

The simple markup:

The script:

Reversing the default checked option

By default, the Yes is “On” or selected as shown in the above example. If you want to make No as checked as web page loads then use the data-reverse attribute in the checkbox tag. See how it works in the example below:

See online demo and code

Only the markup is changed than the above example:

You may see, the order of Yes/No is also changed.

Create large checkboxes

For creating large size checkboxes, use the data-group-cls attribute and assign it the btn-group-lg value. See how large it displays:

Bootstrap checkbox large


See online demo and code

The markup:

Using text other than Yes/No example

Well, of course, it is not for Yes and No text only checkbox plug-in. To change the labels of the checkbox in On and off states, use the onLabel and offLabel options in the jQuery code. See this demo where I used the True/False labels:

Bootstrap checkbox labels

See online demo and code

The script:

Changing the default colors in On/Off states

The default colors are set for the Bootstrap checkbox in On and Off states as shown in above demos. You may customize all that.

In this demo, I have changed the colors in On and off states by using the offCls, onCls, offActiveCls, and onActiveCls options in the jQuery code:

Bootstrap checkbox colors

See online demo and code

The script used for this demo:

Create vertical checkboxes

Use the data-group-cls attribute and assign it the btn-group-vertical value for creating the vertical options for checkboxes:

Bootstrap checkbox vertical


See online demo and code

The code:

Using icons in toggle checkbox button

As mentioned earlier, you may use the icons in the checkboxes that are turned into toggle buttons. See this demo where thumbs-up and thumbs-down icons are used for Yes and No text:

Bootstrap checkbox icons

See online demo and code

The script:

You can see, the offIconCls and onIconCls options are used in the code. You may also set the icons by data attributes.

For a full list of data attributes and options, go to the plug-in developer’s page here.