content logo

Bootstrap Toggle Switches:

Bootstrap Toggle Switch with Color Change Effect

No single aspect of any business is more important than owning a quality and professional website. The website is literally your company’s front door. If your website is interesting and is able to catch someone’s attention, then you can easily convert the users into engaged customers and build a market for yourself. So, a great website is really what you need.

To make your website great, you need to design a proper user interface. This interface should be engaging but not too complicated. What you can do is to choose the right styles, proper effects and animations and nice colours. One of the major features of the website that are scattered all over the pages, is the toggle switch. These switches can be used to alter between two modes. They offer simple yet effective functionality.

The code we have for you in the section below, is Bootstrap toggle switch with change colour effects. This is perfect if you want to make your website special and draw everyone’s attention. This code features two texts labeled yes and no besides each button. Selecting no deactivates the Bootstrap switch and causes it to turn great while activating it again will turn its colour to green. This is a really cool addition to a Bootstrap toggle switch and helps your design to stand out. If you want this Bootstrap change text colour template, you can use it in your website with no fees whatsoever.

#

Bootstrap Switch

#

Bootstrap Change Text Color

#

Toggle Switch with Color

#

Bootstrap Toggle Switch

<!-- This script got from frontendfreecode.com -->
<div class="container"style="text-align:center">
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
            <p class="off">No</p>
            <p class="on left-align-yes">Yes</p>
        </label>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
html {
    scroll-behavior: smooth;
}
.left-align-yes{
    left: 55px!important;
}
body{
  padding-top:100px;
}
#fat{
  background:#00BCD4;
  height:400px;
}
.icon-bar {
    width: 22px; 
    height: 3px;
    background-color: #C59B6D;
    display: block;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: 4px
}
.navbar-toggler {
    border: none;
    margin: 20px 10px 0 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all ease .4s;
    background: #C59B6D;
}
.navbar-toggler:focus{
    outline: 0px;
}
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 190%;
    background-color: white;
}
.navbar-toggler .middle-bar {
    opacity: 0;
}
.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% -80%;
    background-color: white;
}
.navbar-toggler.collapsed{
    background: #fafafa;
    transition: all ease .4s;
}
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
    background-color: #C59B6D;
}
.navbar-toggler.collapsed .middle-bar {
    opacity: 1;

}
.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
    background-color: #C59B6D;
}
.switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:50px;
    height:14px;
    margin:5px;
    margin-left: 25px;
    -webkit-transform:translateY(50%);
    transform:translateY(50%);
    position:relative;
}
.slider {
    text-align:left!important;
    position:absolute;
    top:0px;
    bottom:0;
    left:0;
    right:0;
    border-radius:20px;
    background: #B7B7B7;
    cursor:pointer;
    border:4px solid transparent;
    overflow:visible;
    -webkit-transition:.4s;
    transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:22px;
    height:22px;
    background:#706F6F;
    border-radius:100px;
    top: -8px;
    -webkit-transform:translateX(-0px);
    transform:translateX(-0px);
    -webkit-transition:.4s;
    transition:.4s;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23);
}

.switch input:checked + .slider:before {
    -webkit-transform:translateX(20px);
    transform:translateX(20px);
    background:#43AD50;
}
.off{
    position: absolute;
    left: -25px;
    top: -5px;
    color: #706F6F;
  -webkit-transition: all ease .4s;
    transition: all ease .4s;
}
.on{
    position: absolute;
    right: -20px;
    top: -5px;
     color: #d3d3d3;
    font-family: 'roboto_light',sans-serif;
    -webkit-transition: all ease .4s;
    transition: all ease .4s;
}
.switch input:checked ~ .off {
    color: #d3d3d3;
    top: -5px;
}
.switch input:checked ~ .on {
    color: #43AD50; 
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
<style>
html {
    scroll-behavior: smooth;
}
.left-align-yes{
    left: 55px!important;
}
body{
  padding-top:100px;
}
#fat{
  background:#00BCD4;
  height:400px;
}
.icon-bar {
    width: 22px; 
    height: 3px;
    background-color: #C59B6D;
    display: block;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: 4px
}
.navbar-toggler {
    border: none;
    margin: 20px 10px 0 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all ease .4s;
    background: #C59B6D;
}
.navbar-toggler:focus{
    outline: 0px;
}
.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 190%;
    background-color: white;
}
.navbar-toggler .middle-bar {
    opacity: 0;
}
.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% -80%;
    background-color: white;
}
.navbar-toggler.collapsed{
    background: #fafafa;
    transition: all ease .4s;
}
.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
    background-color: #C59B6D;
}
.navbar-toggler.collapsed .middle-bar {
    opacity: 1;

}
.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
    background-color: #C59B6D;
}
.switch input { 
    display:none;
}
.switch {
    display:inline-block;
    width:50px;
    height:14px;
    margin:5px;
    margin-left: 25px;
    -webkit-transform:translateY(50%);
    transform:translateY(50%);
    position:relative;
}
.slider {
    text-align:left!important;
    position:absolute;
    top:0px;
    bottom:0;
    left:0;
    right:0;
    border-radius:20px;
    background: #B7B7B7;
    cursor:pointer;
    border:4px solid transparent;
    overflow:visible;
    -webkit-transition:.4s;
    transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:22px;
    height:22px;
    background:#706F6F;
    border-radius:100px;
    top: -8px;
    -webkit-transform:translateX(-0px);
    transform:translateX(-0px);
    -webkit-transition:.4s;
    transition:.4s;
    -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23);
}

.switch input:checked + .slider:before {
    -webkit-transform:translateX(20px);
    transform:translateX(20px);
    background:#43AD50;
}
.off{
    position: absolute;
    left: -25px;
    top: -5px;
    color: #706F6F;
  -webkit-transition: all ease .4s;
    transition: all ease .4s;
}
.on{
    position: absolute;
    right: -20px;
    top: -5px;
     color: #d3d3d3;
    font-family: 'roboto_light',sans-serif;
    -webkit-transition: all ease .4s;
    transition: all ease .4s;
}
.switch input:checked ~ .off {
    color: #d3d3d3;
    top: -5px;
}
.switch input:checked ~ .on {
    color: #43AD50; 
}
</style>

</head>
<body>
<div class="container"style="text-align:center">
    <div>
        <label class="switch">
            <input type="checkbox">
            <span class="slider"></span>
            <p class="off">No</p>
            <p class="on left-align-yes">Yes</p>
        </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