Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Turn checkboxes and radio buttons into toggle switches.
For more info please visit the plugin's Demo Page or Github Repo.

Bootstrap Switch Examples


							<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();
						});

						

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9