content logo

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 www.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://www.frontendfreecode.com">Frontend Free Code</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 www.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">Frontend Free Code</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