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

Usage

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">
  <label>
    <input data-toggle="toggle" type="checkbox">
    Option one is enabled
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input disabled data-toggle="toggle" type="checkbox">
    Option two is disabled
  </label>
</div>

API – initialize by JavaScript

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

$(function() {
  $('#my-toggle').bootstrapToggle();
});

See the documentation for more examples.

License: MIT

Homepage:

http://www.bootstraptoggle.com

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

https://github.com/minhur/bootstrap-toggle

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

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest100