Bootstrap Toggle
Author: metatags generator
Description: Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
Keywords: bootstrap, toggle, switch, bootstrap-toggle, bootstrap-switch

## Getting Started

### Installation

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

Warning If you are using Bootstrap v2.3.2, use `bootstrap2-toggle.min.js` and `bootstrap2-toggle.min.css` instead.

`<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>`

### Bower Install

`bower install bootstrap-toggle`

## Usage

### Basic example

Simply add `data-toggle="toggle"` to convert checkboxes into toggles.

### Stacked checkboxes

Refer to Bootstrap Form Controls documentation to create stacked checkboxes. Simply add `data-toggle="toggle"` to convert checkboxes into toggles.

Option one is enabled
Option two is disabled

### Inline Checkboxes

Refer to Bootstrap Form Controls documentation to create inline checkboxes. Simply add `data-toggle="toggle"` to a convert checkboxes into toggles.

First Second Third

## API

### Initialize by JavaScript

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

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-on="Enabled"`.

Name | Type | Default | Description
--- | --- | --- | ---
on | string | html | `"On"` | Text of the on toggle
off | string | html | `"Off"` | Text of the off toggle
size | string | `"normal"` | Size of the toggle. Possible values are:`large`,`normal`,`small`,`mini` Refer to Bootstrap Button Sizes documentation for more information.
onstyle | string | `"primary"` | Style of the on toggle. Possible values are:`default`,`primary`,`success`,`info`,`warning`,`danger` Refer to Bootstrap Button Options documentation for more information.
offstyle | string | `"default"` | Style of the off toggle. Possible values are:`default`,`primary`,`success`,`info`,`warning`,`danger` Refer to Bootstrap Button Options documentation for more information.
style | string |  | Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
width | integer | null | Sets the width of the toggle. if set to null, width will be calculated.
height | integer | null | Sets the height of the toggle. if set to null, height will be calculated.

### Methods

Methods can be used to control toggles directly.

Method | Example | Description | Demo
--- | --- | --- | ---
initialize | `$('#toggle-demo').bootstrapToggle()` | Initializes the toggle plugin with options |
destroy | `$('#toggle-demo').bootstrapToggle('destroy')` | Destroys the toggle |
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 |

## Events

### Event Propagation

Note All events are propagated to and from input element to the toggle.

You should listen to events from the `<input type="checkbox">` directly rather than look for custom events.

### API vs Input

This also means that using the API or Input to trigger events will work both ways.

## Demos

### Sizes

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

### Custom Sizes

Bootstrap toggle can handle custom sizes by `data-width` and `data-height` options.

### Colors

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

### Colors Mix

You can style on state as well as the off state.

### Custom Style

Customized styles can be applied as easily.

### Custom Text

The text can be changed easily with attributes or options.

### Icons/Html Text

You can easily add icons or images since html is supported for on/off text.

### Multiple Lines of Text

Toggles with multiple lines will adjust its heights.

### Animation Speed

Transition speed can be easily controlled with css `transition` property on `.toggle-group`. You can also turn animation off completely.