Bootstrap Toggle Switches:

Colorful Bootstrap Toggle Switches

Finding the right colour for the website can be difficult. Colours are more powerful than you think and if you learn to use them correctly, you can improve your website by a lot. Normally, an amateur web designer does not have enough experience to understand which colour is best to use where and therefore they just use what they think looks nice. That could be enough if you take general taste into consideration but having a professional design the colour scheme of your website can be hugely beneficial. A good idea is to determine the theme of your website before you start designing. Ask yourself what you want? An intelligent look? A sleek design? Elegant colours? Provocative and bold? Warm and welcoming? Just see what you feel is best suited for the website you have in mind and add in the features according to that.

Here we have code which adds various Bootstrap toggle switches with different colour designs. Our Bootstrap colourful switches are great if you want to know which colour is better for the theme you have but don’t have enough experience to do it yourself. It features colourful beautiful switch buttons with both minimalistic and modern designs. These colourful switches display a grey colour when they are inactive and change to the main colour when they are turned on.

Bootstrap Toggle Switch

Beautiful Switch Button

Colorful Switch

Bootstrap Colorful Switches

<!-- This script got from frontendfreecode.com -->
<div class="mt-5">
    <div class="clearfix"></div>
    <div class="col-sm-12" style="text-align:center">
        <label class="label-switch switch-primary">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-success">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-info">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-warning">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-danger">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
    </div>
    <div class="col-sm-12" style="text-align:center">
        <label class="label-switch switch-primary">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-success">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-info">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-warning">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-danger">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.switch{
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.switch + .lable{
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 20px;
  min-height: 18px;
  min-width: 18px;
  font-weight: normal;
  cursor: pointer;
}
.switch + .lable::before{
  cursor: pointer;
  font-family: fontAwesome;
  font-weight: normal;
  font-size: 12px;
  color: #32a3ce;
  content: "\a0";
  background-color: #FAFAFA;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  display: inline-block;
  text-align: center;
  height: 16px;
  line-height: 14px;
  min-width: 16px;
  margin-right: 1px;
  position: relative;
  top: -1px;
}
.switch:checked + .lable::before {
  display: inline-block;
  content: '\f00c';
  background-color: #F5F8FC;
  border-color: #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch + .lable {
  margin: 0 4px;
  min-height: 24px;
}
.switch + .lable::before {
  font-weight: normal;
  font-size: 11px;
  line-height: 17px;
  height: 20px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #CCC;
  text-align: left;
  float: left;
  padding: 0;
  width: 52px;
  text-indent: -21px;
  margin-right: 0;
  -webkit-transition: text-indent .3s ease;
  -o-transition: text-indent .3s ease;
  transition: text-indent .3s ease;
  top: auto;
}
.switch.switch-bootstrap + .lable::before {
  font-family: FontAwesome;
  content: "\f00d";
  box-shadow: none;
  border-width: 0;
  font-size: 16px;
  background-color: #a9a9a9;
  color: #F2F2F2;
  width: 52px;
  height: 22px;
  line-height: 21px;
  text-indent: 32px;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  transition: background 0.1s ease;
}
.switch.switch-bootstrap + .lable::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 12px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  width: 18px;
  height: 18px;
  text-align: center;
  background-color: #F2F2F2;
  border: 4px solid #F2F2F2;
  -webkit-transition: left 0.2s ease;
  -o-transition: left 0.2s ease;
  transition: left 0.2s ease;
}
.switch.switch-bootstrap:checked + .lable::before {
  content: "\f00c";
  text-indent: 6px;
  color: #FFF;
  border-color: #b7d3e5;
  
}
.switch-primary >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #337ab7;
}
.switch-success >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #5cb85c;
}
.switch-danger >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #d9534f;
}
.switch-info >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #5bc0de;
}
.switch-warning >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #f0ad4e;
}
.switch.switch-bootstrap:checked + .lable::after {
  left: 32px;
  background-color: #FFF;
  border: 4px solid #FFF;
  text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
/* square */
.switch-square{
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.switch-square + .lable{
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 20px;
  min-height: 18px;
  min-width: 18px;
  font-weight: normal;
  cursor: pointer;
}
.switch-square + .lable::before{
  cursor: pointer;
  font-family: fontAwesome;
  font-weight: normal;
  font-size: 12px;
  color: #32a3ce;
  content: "\a0";
  background-color: #FAFAFA;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  display: inline-block;
  text-align: center;
  height: 16px;
  line-height: 14px;
  min-width: 16px;
  margin-right: 1px;
  position: relative;
  top: -1px;
}
.switch-square:checked + .lable::before {
  display: inline-block;
  content: '\f00c';
  background-color: #F5F8FC;
  border-color: #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch-square + .lable {
  margin: 0 4px;
  min-height: 24px;
}
.switch-square + .lable::before {
  font-weight: normal;
  font-size: 11px;
  line-height: 17px;
  height: 20px;
  overflow: hidden;
  border-radius: 2px;
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #CCC;
  text-align: left;
  float: left;
  padding: 0;
  width: 52px;
  text-indent: -21px;
  margin-right: 0;
  -webkit-transition: text-indent .3s ease;
  -o-transition: text-indent .3s ease;
  transition: text-indent .3s ease;
  top: auto;
}
.switch-square.switch-bootstrap + .lable::before {
  font-family: FontAwesome;
  content: "\f00d";
  box-shadow: none;
  border-width: 0;
  font-size: 16px;
  background-color: #a9a9a9;
  color: #F2F2F2;
  width: 52px;
  height: 22px;
  line-height: 21px;
  text-indent: 32px;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  transition: background 0.1s ease;
}
.switch-square.switch-bootstrap + .lable::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 12px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  width: 18px;
  height: 18px;
  text-align: center;
  background-color: #F2F2F2;
  border: 4px solid #F2F2F2;
  -webkit-transition: left 0.2s ease;
  -o-transition: left 0.2s ease;
  transition: left 0.2s ease;
}
.switch-square.switch-bootstrap:checked + .lable::before {
  content: "\f00c";
  text-indent: 6px;
  color: #FFF;
  border-color: #b7d3e5;
  
}
.switch-primary >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #337ab7;
}
.switch-success >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #5cb85c;
}
.switch-danger >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #d9534f;
}
.switch-info >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #5bc0de;
}
.switch-warning >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #f0ad4e;
}
.switch-square.switch-bootstrap:checked + .lable::after {
  left: 32px;
  background-color: #FFF;
  border: 4px solid #FFF;
  text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
.switch-square.switch-bootstrap + .lable::after {
	border-radius: 2px;
}

<link rel='stylesheet' href='https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

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

<link rel='stylesheet' href='https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style>
.switch{
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.switch + .lable{
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 20px;
  min-height: 18px;
  min-width: 18px;
  font-weight: normal;
  cursor: pointer;
}
.switch + .lable::before{
  cursor: pointer;
  font-family: fontAwesome;
  font-weight: normal;
  font-size: 12px;
  color: #32a3ce;
  content: "\a0";
  background-color: #FAFAFA;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  display: inline-block;
  text-align: center;
  height: 16px;
  line-height: 14px;
  min-width: 16px;
  margin-right: 1px;
  position: relative;
  top: -1px;
}
.switch:checked + .lable::before {
  display: inline-block;
  content: '\f00c';
  background-color: #F5F8FC;
  border-color: #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch + .lable {
  margin: 0 4px;
  min-height: 24px;
}
.switch + .lable::before {
  font-weight: normal;
  font-size: 11px;
  line-height: 17px;
  height: 20px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #CCC;
  text-align: left;
  float: left;
  padding: 0;
  width: 52px;
  text-indent: -21px;
  margin-right: 0;
  -webkit-transition: text-indent .3s ease;
  -o-transition: text-indent .3s ease;
  transition: text-indent .3s ease;
  top: auto;
}
.switch.switch-bootstrap + .lable::before {
  font-family: FontAwesome;
  content: "\f00d";
  box-shadow: none;
  border-width: 0;
  font-size: 16px;
  background-color: #a9a9a9;
  color: #F2F2F2;
  width: 52px;
  height: 22px;
  line-height: 21px;
  text-indent: 32px;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  transition: background 0.1s ease;
}
.switch.switch-bootstrap + .lable::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 12px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  width: 18px;
  height: 18px;
  text-align: center;
  background-color: #F2F2F2;
  border: 4px solid #F2F2F2;
  -webkit-transition: left 0.2s ease;
  -o-transition: left 0.2s ease;
  transition: left 0.2s ease;
}
.switch.switch-bootstrap:checked + .lable::before {
  content: "\f00c";
  text-indent: 6px;
  color: #FFF;
  border-color: #b7d3e5;
  
}
.switch-primary >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #337ab7;
}
.switch-success >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #5cb85c;
}
.switch-danger >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #d9534f;
}
.switch-info >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #5bc0de;
}
.switch-warning >.switch.switch-bootstrap:checked + .lable::before {
    background-color: #f0ad4e;
}
.switch.switch-bootstrap:checked + .lable::after {
  left: 32px;
  background-color: #FFF;
  border: 4px solid #FFF;
  text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
/* square */
.switch-square{
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.switch-square + .lable{
  position: relative;
  display: inline-block;
  margin: 0;
  line-height: 20px;
  min-height: 18px;
  min-width: 18px;
  font-weight: normal;
  cursor: pointer;
}
.switch-square + .lable::before{
  cursor: pointer;
  font-family: fontAwesome;
  font-weight: normal;
  font-size: 12px;
  color: #32a3ce;
  content: "\a0";
  background-color: #FAFAFA;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  display: inline-block;
  text-align: center;
  height: 16px;
  line-height: 14px;
  min-width: 16px;
  margin-right: 1px;
  position: relative;
  top: -1px;
}
.switch-square:checked + .lable::before {
  display: inline-block;
  content: '\f00c';
  background-color: #F5F8FC;
  border-color: #adb8c0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}
/* CSS3 on/off switches */
.switch-square + .lable {
  margin: 0 4px;
  min-height: 24px;
}
.switch-square + .lable::before {
  font-weight: normal;
  font-size: 11px;
  line-height: 17px;
  height: 20px;
  overflow: hidden;
  border-radius: 2px;
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  border: 1px solid #CCC;
  text-align: left;
  float: left;
  padding: 0;
  width: 52px;
  text-indent: -21px;
  margin-right: 0;
  -webkit-transition: text-indent .3s ease;
  -o-transition: text-indent .3s ease;
  transition: text-indent .3s ease;
  top: auto;
}
.switch-square.switch-bootstrap + .lable::before {
  font-family: FontAwesome;
  content: "\f00d";
  box-shadow: none;
  border-width: 0;
  font-size: 16px;
  background-color: #a9a9a9;
  color: #F2F2F2;
  width: 52px;
  height: 22px;
  line-height: 21px;
  text-indent: 32px;
  -webkit-transition: background 0.1s ease;
  -o-transition: background 0.1s ease;
  transition: background 0.1s ease;
}
.switch-square.switch-bootstrap + .lable::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  border-radius: 12px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  width: 18px;
  height: 18px;
  text-align: center;
  background-color: #F2F2F2;
  border: 4px solid #F2F2F2;
  -webkit-transition: left 0.2s ease;
  -o-transition: left 0.2s ease;
  transition: left 0.2s ease;
}
.switch-square.switch-bootstrap:checked + .lable::before {
  content: "\f00c";
  text-indent: 6px;
  color: #FFF;
  border-color: #b7d3e5;
  
}
.switch-primary >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #337ab7;
}
.switch-success >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #5cb85c;
}
.switch-danger >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #d9534f;
}
.switch-info >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #5bc0de;
}
.switch-warning >.switch-square.switch-bootstrap:checked + .lable::before {
    background-color: #f0ad4e;
}
.switch-square.switch-bootstrap:checked + .lable::after {
  left: 32px;
  background-color: #FFF;
  border: 4px solid #FFF;
  text-shadow: 0 -1px 0 rgba(0, 200, 0, 0.25);
}
.switch-square.switch-bootstrap + .lable::after {
	border-radius: 2px;
}
</style>

</head>
<body>
<div class="mt-5">
    <div class="clearfix"></div>
    <div class="col-sm-12" style="text-align:center">
        <label class="label-switch switch-primary">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-success">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-info">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-warning">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-danger">
            <input type="checkbox" class="switch switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
    </div>
    <div class="col-sm-12" style="text-align:center">
        <label class="label-switch switch-primary">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-success">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-info">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-warning">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
        <label class="label-switch switch-danger">
            <input type="checkbox" class="switch-square switch-bootstrap status" name="status" id="status" value="1" checked="checked">
            <span class="lable"></span>
        </label>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

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