Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles.
Simply add data-toggle="toggle"
to convert checkboxes into toggles.
<input type="checkbox" checked data-toggle="toggle">
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">
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">
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">
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">