Bootstrap Toggle Switches:

Dual Toggle Switches with Bootstrap

Toggle switches ai visitors in updating their preferences, settings, and any other type of information. When you want to use toggles, you should keep some key factors in mind. For instance, you must provide direct labels for your switches. Simply write a verb to describe what action toggling this switch does to avoid confusing the users. You should also use standard visual designs. This does not mean you shouldn’t use your creativity and innovation powers in any shape or form. It simply means that you should use your creativity to design a toggle switch which shares a resemblance with the basic features of a standard toggle switch but still looks unique and different overall. Last but not least, you have to be smart about placing toggle switches. Try to have them at the top of the screen so they user can easily spot it.

Here in this post, we are sharing a toggle switch with Bootstrap which has a really unique concept to it. Most toggle switches that we have seen until now consist of a split slider with two sides. Flicking the switch to either side causes an effect to take place. The code we have here is a Bootstrap dual switch with an alternative look to switches. The sides are no longer connected in this beautiful dual switch and instead are displayed in two separate sides. The basic function of toggle switches is still present in dual toggle switches so activating one side deactivates the other.

Dual Toggle Switches

Bootstrap Dual Switch

Buautiful Dual Switch

Toggle Switch with Bootstrap

<!-- This script got from frontendfreecode.com -->
<h1 class="text-center">Are you happy ?</h1>
<my-app class="text-center" style="display:block"></my-app><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.toggle-switch {
    width: 40px;
    height: 22px;
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    border: 1px solid #f1f1f1;
    cursor: pointer;
}
.toggle-switch .toggle-handler {
    width: 20px;
    height: 20px;
    position: absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    top: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.toggle-switch .toggle-bg-on {
    width: 40px;
    height: 20px;
    text-align:center;
    background-color: #469f41;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    transform-origin: 0 50%}
.toggle-switch.toggle-off .toggle-handler {
    background-color: #f1f1f1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    left: 0;
}
.toggle-switch.toggle-off .toggle-bg-on {
    visibility: hidden;
    opacity: .4;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    width: 50%}
.toggle-switch.toggle-on .toggle-handler {
    background-color: #fff;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-box-shadow: 1px 1px 2px #ccc;
    -moz-box-shadow: 1px 1px 2px #ccc;
    box-shadow: 1px 1px 2px #ccc;
}
.toggle-switch.toggle-on .toggle-bg-on {
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    width: 100%}

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
const { Component } = ng.core;
const { bootstrap } = ng.platform.browser;
let AppComponent = class AppComponent {
    constructor() {
        this.happy = true;
        console.log("app started, is Happy ? :", this.happy);
    }
    changeAction() {
        console.log("Before ", this.happy);
        this.happy = !this.happy;
        console.log("After ", this.happy);
    }
};
AppComponent = __decorate([
    Component({
        selector: 'my-app',
        template: `
<!-- First Switch -->
<div class="toggle-switch" [class.toggle-on]="happy" [class.toggle-off]="!happy" (click)="changeAction()">
              <div class="toggle-wrap">
                <div class="toggle-bg-on"></div>
              </div>
              <div class="toggle-handler"></div>
            </div> YES

<!-- Second Switch -->
<div class="toggle-switch text-center" [class.toggle-on]="!happy" [class.toggle-off]="happy" (click)="changeAction()">
              <div class="toggle-wrap">
                <div class="toggle-bg-on"></div>
              </div>
              <div class="toggle-handler"></div>
            </div> NO
    `
    }),
    __metadata("design:paramtypes", [])
], AppComponent);
// --- MyApp
// END Components
// BOOT ANGULAR:
bootstrap(AppComponent);

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/angular2-polyfills.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/Rx.umd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/angular2-all.umd.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/angular2-polyfills.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/Rx.umd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.13/angular2-all.umd.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style>
.toggle-switch {
    width: 40px;
    height: 22px;
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    border: 1px solid #f1f1f1;
    cursor: pointer;
}
.toggle-switch .toggle-handler {
    width: 20px;
    height: 20px;
    position: absolute;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    top: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.toggle-switch .toggle-bg-on {
    width: 40px;
    height: 20px;
    text-align:center;
    background-color: #469f41;
    -webkit-border-radius: 9999px;
    -moz-border-radius: 9999px;
    border-radius: 9999px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    transform-origin: 0 50%}
.toggle-switch.toggle-off .toggle-handler {
    background-color: #f1f1f1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    left: 0;
}
.toggle-switch.toggle-off .toggle-bg-on {
    visibility: hidden;
    opacity: .4;
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    width: 50%}
.toggle-switch.toggle-on .toggle-handler {
    background-color: #fff;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
    -webkit-box-shadow: 1px 1px 2px #ccc;
    -moz-box-shadow: 1px 1px 2px #ccc;
    box-shadow: 1px 1px 2px #ccc;
}
.toggle-switch.toggle-on .toggle-bg-on {
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    width: 100%}
</style>

</head>
<body>
<h1 class="text-center">Are you happy ?</h1>
<my-app class="text-center" style="display:block"></my-app><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
const { Component } = ng.core;
const { bootstrap } = ng.platform.browser;
let AppComponent = class AppComponent {
    constructor() {
        this.happy = true;
        console.log("app started, is Happy ? :", this.happy);
    }
    changeAction() {
        console.log("Before ", this.happy);
        this.happy = !this.happy;
        console.log("After ", this.happy);
    }
};
AppComponent = __decorate([
    Component({
        selector: 'my-app',
        template: `
<!-- First Switch -->
<div class="toggle-switch" [class.toggle-on]="happy" [class.toggle-off]="!happy" (click)="changeAction()">
              <div class="toggle-wrap">
                <div class="toggle-bg-on"></div>
              </div>
              <div class="toggle-handler"></div>
            </div> YES

<!-- Second Switch -->
<div class="toggle-switch text-center" [class.toggle-on]="!happy" [class.toggle-off]="happy" (click)="changeAction()">
              <div class="toggle-wrap">
                <div class="toggle-bg-on"></div>
              </div>
              <div class="toggle-handler"></div>
            </div> NO
    `
    }),
    __metadata("design:paramtypes", [])
], AppComponent);
// --- MyApp
// END Components
// BOOT ANGULAR:
bootstrap(AppComponent);
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS