Collection of free Bootstrap toggle switch code examples

Welcome to our collection of Bootstrap examples! In this carefully curated compilation, we have gathered a wide range of code snippets that demonstrate the versatility and power of the Bootstrap framework.

Light Switch for Bootstrap 5

Author:
han109k | June 21, 2021
Made with:
HTML / CSS / JS

About a code

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

Toggle Switche Checkbox #20

Author:
rokr | March 5, 2021
Made with:
HTML / CSS

About a code

Free on/off toggle template.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.3.1

Toggle Switche Checkbox #8

Author:
rokr | December 23, 2020
Made with:
HTML / CSS

About a code

Change between dark and light modes manually.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.3.1

Toggle Switche Checkbox #8

Author:
rokr | December 23, 2020
Made with:
HTML / CSS

About a code

Change between dark and light modes manually.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.3.1

Toggle Switche Checkbox #6

Author:
rokr | December 23, 2020
Made with:
HTML / CSS

About a code

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

Bootstrap 5 Notification Preferences Card with Switch Toggle Buttons

Author:
BBBootstrap Team | November, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
5.0.0

Bootstrap 5 Custom Radio Toggle Buttons

Author:
BBBootstrap Team | September, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
5.0.0
Bootstrap 4 Dark Mode Toggle

Bootstrap 4 Dark Mode Toggle

Author:
monsss | May 19, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css
Bootstrap version:
4.3.1

Bootstrap 4 Toggle Switches

Author:
Ondrej | February 12, 2020
Made with:
HTML / CSS / JS

About a code

Create bootstrap toggle switches using Bootstrap custom form components.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.3.1
Toggle Switch

Toggle Switch

Author:
susanta96 | January 14, 2020
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.3.1

Dark Mode Switch

Author:
Christian Oliff | July 3, 2019
Made with:
HTML / CSS / JS

About a code

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

Bootstrap 4 - Language Toggle Switch

Author:
SHANTIKUMAR | February 28, 2019
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
jquery.js
Bootstrap version:
4.1.3

Toggle Radio Button

Author:
banwarilalpurvya |
Made with:
HTML / CSS / JS

About a code

Toggle radio button with Bootstrap.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.1.1

Bootstrap 4 Switches

Author:
Cory LaViska | November 10, 2017
Made with:
HTML / CSS / JS

About a code

Bootstrap 4 switches (customizable via Sass).

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.0.0

On/Off Switch

Author:
Aanjulena Sweet | February 16, 2017
Made with:
HTML / CSS (Less)/ JS

About a code

Bootstrap button toggle.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.0.0

Bootstrap Material Design Switch

Author:
Volodymyr | January 22, 2017
Made with:
HTML / CSS / JS

About a code

Bootstrap Material Design toggle switches without JS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
3.3.7

Bootstrap 4 iOS Like Toggle

Author:
Xavier Gmez Gonzlez | November 28, 2016
Made with:
HTML / CSS / JS

About a code

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

Bootstrap 4 Toggle

Author:
Brent Ely | June 10, 2014
Made with:
HTML / CSS / JS

About a code

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

Bootstrap 4 Simple Checkbox Switch

Author:
pradeep330 |
Made with:
HTML / CSS

About a code

Bootstrap checkbox switches without JavaScript.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
4.0.0

Bootstrap Single Button Toggle

Author:
tonetlds |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css
Bootstrap version:
3.3.0

Bootstrap Switch/Toggle

Author:
Jennifer Louie | March 13, 2015
Made with:
HTML / CSS (SCSS) / JS

About a code

Bootstrap pure CSS switch/toggle buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
3.3.2

Toggle Switch

Author:
escapedlion |
Made with:
HTML / CSS

About a code

Custom Bootsrap toggle switches

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Bootstrap version:
3.2.0
Bootstrap 3 Toggle Switch Button

Bootstrap 3 Toggle Switch Button

Author:
Dey Dey | April 21, 2014
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
jquery.js
Bootstrap version:
3.1.0

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨