Checkbox toggle with Bootstrap

A flexible solution for making we UI elements nicer. Convert simple, boring checkbox into checkbox toggle with bootstrap.

A little bit of magic – checkbox toggle with bootstrap

Bootstrap Toggle is a very flexible Bootstrap plugin that converts checkboxes into toggles. With this we can really improve UI of our web apps. This help us to make modern designs living, with minimal amount of code written.

Turn checkbox into toggle with Bootstrap
Turn checkbox into toggle with Bootstrap


We can download the latest version of Bootstrap Toggle or use CDN to load the library.

Note: in case of using Bootstrap v2.3.2, please include bootstrap2-toggle.min.js and bootstrap2-toggle.min.css versions.

Basic example

Simply add data-toggle=”toggle” to convert checkboxes into toggles:

<input checked data-toggle="toggle" type="checkbox">

Enabled / disabled:

<div class="checkbox">
    <input data-toggle="toggle" type="checkbox">
    Option one is enabled
<div class="checkbox disabled">
    <input disabled data-toggle="toggle" type="checkbox">
    Option two is disabled

API – initialize by JavaScript

Initialize toggles with id toggle-one with a single line of JavaScript:

$(function() {

See the documentation for more examples.

License: MIT


Get the “checkbox toggle with bootstrap” solution from GitHub:

See also:

Google plus like jQuery drop down box

jQuery stackoverflow voting widget – Upvote

jQuery plugin for custom checkboxes and radio buttons – wCheck

Checkboxradio – jQuery checkbox replacement plugin

Modern jQuery date picker plugin – DateSelect