Flexible Toggle Switches For Bootstrap – Toggle.css

Category: CSS & CSS3 , Form | April 22, 2017
Views Total:4,773 views
Official Page:Go to website
Last Update:April 22, 2017


Flexible Toggle Switches For Bootstrap – Toggle.css


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>

You Might Be Interested In:

Leave a Reply