Keen | Bootstrap Switch

HTML
JS


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										Bootstrap Switch Examples
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<input data-switch="true" type="checkbox" checked="checked" />
												<input data-switch="true" type="checkbox" />
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">State Colors</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<input data-switch="true" type="checkbox"  checked="checked" data-on-color="success" data-off-color="warning"/>
												<input data-switch="true" type="checkbox" checked="checked" data-on-color="primary"/>
												<input data-switch="true" type="checkbox" checked="checked" data-on-color="danger"/>
												<input data-switch="true" type="checkbox" checked="checked" data-on-color="info"/>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Custom Label</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<input data-switch="true" type="checkbox" checked="checked" data-on-text="True" data-handle-width="50" data-off-text="False" data-on-color="success"/>
												<input data-switch="true" type="checkbox" checked="checked" data-on-text="1" data-handle-width="30" data-off-text="0" data-on-color="info" />
												<input data-switch="true" type="checkbox" checked="checked" data-on-text="Enabled" data-handle-width="70" data-off-text="Disabled" data-on-color="primary" />
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Disabled State</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<input data-switch="true" type="checkbox" checked="checked" disabled="disabled"/>
												<input data-switch="true" type="checkbox" disabled="disabled"/>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Sizing</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<input data-switch="true" data-size="small" type="checkbox" checked="checked" />
												<input data-switch="true" type="checkbox" checked="checked" />
												<input data-switch="true" data-size="large" type="checkbox" checked="checked" />
											</div>
										</div>
										<div class="form-group row">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
											<div class="col-lg-9 col-md-9 col-sm-12">
												<a href="" class="btn btn-light-danger font-weight-bold" data-toggle="modal" data-target="#kt_switch_modal">Launch switches on modal</a>
											</div>
										</div>
									</div>
									<div class="card-footer">
										<div class="row">
											<div class="col-lg-9 ml-lg-auto">
												<button type="reset" class="btn btn-primary mr-2">Submit</button>
												<button type="reset" class="btn btn-secondary">Cancel</button>
											</div>
										</div>
									</div>
								</form>
								<!--end::Form-->
							</div>


						// Class definition

						var KTBootstrapSwitch = function() {

						// Private functions
						var demos = function() {
							// minimum setup
							$('[data-switch=true]').bootstrapSwitch();
						};

						return {
							// public functions
							init: function() {
							demos();
							},
						};
						}();

						jQuery(document).ready(function() {
						KTBootstrapSwitch.init();
						});

Pricing Tables

Wizards

Invoices

Login

Error Pages

Bootstrap Switch

Bootstrap Switch Examples

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Pricing Tables

Wizards

Invoices

Login

Error Pages

Quick Actions

Bootstrap Switch

Bootstrap Switch Examples

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9