Bootstrap Toggle

Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.

Examples

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

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

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

								
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="default">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
								
							
Custom Style

Customized styles can be applied as easily.

								
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="default" data-style="btn-round">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-style="btn-round">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-style="btn-round">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="info" data-style="btn-round">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-style="btn-round">
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger" data-style="btn-round">
								
							
Colors Mix

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

								
									<input type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
								<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning" data-offstyle="info">
								
							
Custom Text

The text can be changed easily with attributes or options.

								
									<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">