Collection of free Bootstrap toggle switch button code examples. Update of October 2020 collection. 5 new items.

Related Articles

  1. CSS Toggle Switches
  2. jQuery Toggle Switches

Author

  • han109k

Made with

  • HTML / CSS / JS

About a code

Light Switch for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that includes -dark or -light as a class. Performed by DOM manipulation using JavaScript. Text color also changed depending on lighting mode. Local storage is used to save preferences under the name lightSwitch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: switch.js

Bootstrap version: 5.0.1

Author

  • rokr

Made with

  • HTML / CSS

About a code

Toggle Switche Checkbox #20

Free on/off toggle template.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Author

  • rokr

Made with

  • HTML / CSS

About a code

Toggle Switche Checkbox #8

Change between dark and light modes manually.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Author

  • rokr

Made with

  • HTML / CSS

About a code

Toggle Switche Checkbox #8

Change between dark and light modes manually.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Author

  • rokr

Made with

  • HTML / CSS

About a code

Toggle Switche Checkbox #6

Toggle switch makes to select or deselect a particular function on your website.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Author

  • BBBootstrap Team

Made with

  • HTML / CSS

About a code

Bootstrap 5 Notification Preferences Card with Switch Toggle Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 5.0.0

Author

  • BBBootstrap Team

Made with

  • HTML / CSS / JS

About a code

Bootstrap 5 Custom Radio Toggle Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 5.0.0

Demo image: Bootstrap 4 Dark Mode Toggle

Author

  • monsss

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Dark Mode Toggle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 4.3.1

Author

  • Ondrej

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Toggle Switches

Create bootstrap toggle switches using Bootstrap custom form components.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Demo image: Toggle Switch

Author

  • susanta96

Made with

  • HTML / CSS / JS

About a code

Toggle Switch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.3.1

Author

  • Christian Oliff

Made with

  • HTML / CSS / JS

About a code

Dark Mode Switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: dark-mode.css, dark-mode-switch.js

Bootstrap version: 4.4.0

Author

  • SHANTIKUMAR

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 - Language Toggle Switch

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Bootstrap version: 4.1.3

Author

  • banwarilalpurvya

Made with

  • HTML / CSS / JS

About a code

Toggle Radio Button

Toggle radio button with Bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.1.1

Author

  • Cory LaViska

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Switches

Bootstrap 4 switches (customizable via Sass).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.0.0

Author

  • Aanjulena Sweet

Made with

  • HTML / CSS (Less)/ JS

About a code

On/Off Switch

Bootstrap button toggle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.0.0

Author

  • Volodymyr

Made with

  • HTML / CSS / JS

About a code

Bootstrap Material Design Switch

Bootstrap Material Design toggle switches without JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 3.3.7

Author

  • Xavier Gmez Gonzlez

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 iOS Like Toggle

A CSS only implementation of an iOS like switch toogle for Bootstrap 4. It uses standart markup from Bootstrap 4, so you only need to add the toggle class to your element and the SCSS to your stylesheet.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.0.0

Author

  • Brent Ely

Made with

  • HTML / CSS / JS

About a code

Bootstrap 4 Toggle

Bootstrap 4 Toggle is a bootstrap plugin/widget that converts checkboxes into toggles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap4-toggle.css, bootstrap4-toggle.js

Bootstrap version: 4.3.1

Author

  • pradeep330

Made with

  • HTML / CSS

About a code

Bootstrap 4 Simple Checkbox Switch

Bootstrap checkbox switches without JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 4.0.0

Author

  • tonetlds

Made with

  • HTML / CSS

About a code

Bootstrap Single Button Toggle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Bootstrap version: 3.3.0

Author

  • Jennifer Louie

Made with

  • HTML / CSS (SCSS) / JS

About a code

Bootstrap Switch/Toggle

Bootstrap pure CSS switch/toggle buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 3.3.2

Author

  • escapedlion

Made with

  • HTML / CSS

About a code

Toggle Switch

Custom Bootsrap toggle switches

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Bootstrap version: 3.2.0

Demo image: Bootstrap 3 Toggle Switch Button

Author

  • Dey Dey

Made with

  • HTML / CSS / JS

About a code

Bootstrap 3 Toggle Switch Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Bootstrap version: 3.1.0