Flexible Toggle Switches For Bootstrap – Toggle.css

Author: qbicfeet
Views Total: 3,976 views
Official Page: Go to website
Last Update: April 22, 2017
License: MIT


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>

See also  Multi-level Bootstrap Navbar In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *