Flexible Toggle Switches For Bootstrap – Toggle.css

Preview:

Description:

The Toggle.css library lets you create customizable switches (toggle buttons) with variable colors and sizes using Bootstrap styles.

How to use it:

Makes sure to load both Bootstrap stylesheet and the toggle.min.css in the html page.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/toggle.min.css">

Add the core CSS class ‘tgl’ and a theme class of your choice to your normal checkbox input and done. Available themes:

• tgl-default
• tgl-primary
• tgl-success
• tgl-info
• tgl-warning
• tgl-danger

<input type="checkbox" class="tgl tgl-default" id="example">
<label for="example">Toggle</label>

Change the default size of your switch by using the following CSS classes:

• tgl-default
• tgl-sm
• tgl-md
• tgl-lg

<input type="checkbox" class="tgl tgl-primary tgl-sm" id="example2">
<label for="example2">Toggle</label>

You’re also allowed to use mixed themes as shown below:

<input type="checkbox" class="tgl tgl-default tgl-on-primary" id="example3">
<label for="example3">Toggle</label>