Touch-friendly Switch Buttons For Bootstrap 4 - switchButton

Touch-friendly Switch Buttons For Bootstrap 4 - switchButton

switchButton is a Bootstrap 4 plugin (< 4kb minified) that transforms the normal checkbox element into responsive, mobile-friendly, customizable switches and toggle buttons for the better experience.


  • Custom on/off labels.
  • Custom styles using your own CSS.
  • 4 sizes: large, normal, small, mini.
  • Smooth toggle transitions.
  • Useful API methods and events.

See also:

How to use it:

1. Install and download.

# Yarn
$ yarn add bootstrap-switch-button
$ npm install bootstrap-switch-button --save

2. Import the Bootstrap Switch Button's files into your Bootstrap project.

<link href="/path/to/bootstrap-switch-button.min.css" rel="stylesheet">  
<script src="/path/to/bootstrap-switch-button.min.js"></script>

3. Autmatically initialize the plugin on the checkbox element using the data-toggle attribute.

<input id="example" type="checkbox" data-toggle="switchbutton">

4. Or initialize the plugin via JavaScript:

<input id="example" type="checkbox">

5. Customize the on/off label. HTML content is supported.

<input type="checkbox" 
       data-onlabel="<i class='fa fa-play'></i> Play" 
       data-offlabel="<i class='fa fa-pause'></i> Pause">

6. Customize the on/off styles. HTML content is supported. All predefined styles: primary,secondary,success,danger,warning,info,light,dark.

<input type="checkbox" 

7. Change the button size. All predefined sizes: lg, medium (default), sm, xs.

<input type="checkbox" 

8. Append an addtional CSS class to the switch. Good for adding your own CSS styles.

<input type="checkbox" 

9. Customize the height/width of the switch. Default: auto.

<input type="checkbox" 

10. You can also pass the options to the switchButton function during init.

  onlabel: 'On',
  onstyle: 'primary',
  offlabel: 'Off',
  offstyle: 'light',
  size: '',
  style: '',
  width: null,
  height: null

11. API methods.

// Destroys the plugin
// Sets the state to On
// Sets the state to Off
// Toggles the state
// Enables the switch
// Disables the switch

This awesome jQuery plugin is developed by gitbrent. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 13.04.2019
  • Source