Collection of free Bootstrap toggle switch button code examples. Update of October 2020 collection. 5 new items.
Related Articles
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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

Links
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
Links
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

Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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

Links
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