toggle.css | Creating Custom Bootstrap Style Toggle Buttons with Pure CSS

toggle.css is a css switch library, it can allow us to create customizable bootstrap style toggle buttons with pure css.

toggle.css - Creating Custom Bootstrap Style Toggle Buttons with Pure CSS

AuthorLinksMade withLast update
qbicfeetOffice HomeCSSDec 02, 2021

How to create bootstrap style toggle buttons using toggle.css?

1.Import bootstrap css style and toggle.css in your html page

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

2.Create a checkbox input witch class tgl and theme class. 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>

3.You also can use following css classes to change the size of toggle button.

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

4.You also can use multiple themes in one checkbox.

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

Leave a Reply

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