Bootstrap switch

by Mattia Larentis () and

Size

Dimensions can be changed too:

// Resets to the regular style
$('#dimension-switch').bootstrapSwitch('setSizeClass', '');
// Sets a mini switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-mini');
// Sets a small switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-small');
// Sets a large switch
$('#dimension-switch').bootstrapSwitch('setSizeClass', 'switch-large');

Colors

Colors can be changed too:

$('#change-color-switch').bootstrapSwitch('setOnClass', 'success');
$('#change-color-switch').bootstrapSwitch('setOffClass', 'danger');

Animation javascript

// Enables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', true);
// Disables animation for the selected item
$('#animated-switch').bootstrapSwitch('setAnimated', false);

Disabled

Text

$('#label-switch').bootstrapSwitch('setOnLabel', 'I');
$('#label-switch').bootstrapSwitch('setOffLabel', 'O');

Label Text

HTML text

HTML text Label Icon

Standard

Font Awesome

Flat UI

Event handler javascript

$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Label Event handler javascript

Label 1

Click on this Text to change the switch state

Label 2

Click on this Text to change the switch state

Click on this Text to change the switch state
    
        
    



    Click on this Text to change the switch state

Toggle State javascript

Status!

ON!

Toggle me!

OFF!

$('#toggle-state-switch').bootstrapSwitch('status'); // true || false
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

Destroy javascript

$('#destroy-switch').bootstrapSwitch('destroy');

Create javascript

Create

$('#create-switch').wrap('').parent().bootstrapSwitch();

Disabled javascript

amazing label

$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

Radio javascript

Option 1

Option 2

Option 3

Radio javascript (allow radios uncheck)

Option 1

Option 2

Option 3

Form - try to use tab, space and reset button


    
        Email
        
            
        
    
    
        Notification 1
        
            
                
            
        
    
    
        Notification 2

Modal

    Modal