content logo

Bootstrap Toggle Switches:

Toggle Switch Button for Changing Language with Bootstrap

By limiting your website to only one language, you are also limiting exposure to your business. This is especially true if you have a website in a less spoken language. When your website is available in multiple languages, you can ensure visits from other countries as well. This means you are drawing the attention of an international market whereas if you limited yourself, you would only have the support of your local market. With that said, if you wish to become identified as a global brand, then it is a good idea to give your audience a means of changing the language to their preferred one. this will elevate your status greatly and improves your reputation. This is why a lot of famous websites have different methods to change the language.

A great way to integrate a language changing feature into your website, is with the help of toggle switches. The Bootstrap switches that we are sharing in this post, are language switches. They allow you to change between two different languages which is extremely useful if you want your website to be in your own native language and a more widely spoken language such as English. These Bootstrap toggle switches have a really nice design with both blue and white background available to choose from. Also, these beautiful toggle switches look really modern and can attract many visitors.

#

Bootstrap Switches

#

Bootstrap Toggle Switches

#

Beautiful Bootstrap Switch

#

Language Switch

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="jumbotron df-bg-primary">
        <div class="df-switch">
            <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                <div class="inner-handle"></div>
                <div class="handle"></div>
            </button>
        </div>
    </div>
    <div class="jumbotron bg-white">
        <div class="df-switch">
            <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                <div class="inner-handle"></div>
                <div class="handle"></div>
            </button>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
  margin: 4rem auto;
}
.jumbotron {border-radius: 0;margin-bottom: 0;}

.jumbotron.df-bg-primary {
  background-color: #083386;
}
.df-switch {
  margin-top: 20px;
  padding: 2rem;
  text-align: center;
}
.btn-toggle {
  top: 50%;
  transform: translateY(-50%);
}
.btn-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 5rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #0885da;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle:before {
  content: 'ENGLISH';
  left: -5rem;
  color: #109fff;
}
.btn-toggle:after {
  content: 'SPANISH';
  right: -5rem;
  opacity: 0.5;
  color: #F47280;
}
.btn-toggle > .inner-handle {
  border-radius: 13px;
  width: 65px;
  height: 13px;
  position: absolute;
  top: 6px;
  left: 8px;
  background-color: #0f71bd;
  box-shadow: inset 1px 1px 2px -1px black;
}
.btn-toggle.active > .inner-handle {
  background-color: #BD4053;
}
.btn-toggle > .handle:before {
  content: "";
  position: absolute;
  height: 34px;
  width: 34px;
  top: 35%;
  left: 11px;
  background-image: radial-gradient(circle at center, #0785da 5px, transparent 5px);
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
.btn-toggle.active > .handle:before {
  background-image: radial-gradient(circle at center, #F47280 5px, transparent 5px);
}
.btn-toggle > .handle {
  position: absolute;
  top: -0.2875rem;
  left: 0.3875rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
  border: 1px solid #ccc;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 2.4175rem;
  transition: left 0.25s;
}
.btn-toggle.active:before {
  opacity: 0.5;
}
.btn-toggle.active:after {
  opacity: 1;
  color: #F47280;
}
.btn-toggle.active {
  background-color: #F47280;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js'></script>
<style>
body {
  margin: 4rem auto;
}
.jumbotron {border-radius: 0;margin-bottom: 0;}

.jumbotron.df-bg-primary {
  background-color: #083386;
}
.df-switch {
  margin-top: 20px;
  padding: 2rem;
  text-align: center;
}
.btn-toggle {
  top: 50%;
  transform: translateY(-50%);
}
.btn-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 5rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #0885da;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle:before {
  content: 'ENGLISH';
  left: -5rem;
  color: #109fff;
}
.btn-toggle:after {
  content: 'SPANISH';
  right: -5rem;
  opacity: 0.5;
  color: #F47280;
}
.btn-toggle > .inner-handle {
  border-radius: 13px;
  width: 65px;
  height: 13px;
  position: absolute;
  top: 6px;
  left: 8px;
  background-color: #0f71bd;
  box-shadow: inset 1px 1px 2px -1px black;
}
.btn-toggle.active > .inner-handle {
  background-color: #BD4053;
}
.btn-toggle > .handle:before {
  content: "";
  position: absolute;
  height: 34px;
  width: 34px;
  top: 35%;
  left: 11px;
  background-image: radial-gradient(circle at center, #0785da 5px, transparent 5px);
  background-size: 10px 10px;
  background-repeat: no-repeat;
}
.btn-toggle.active > .handle:before {
  background-image: radial-gradient(circle at center, #F47280 5px, transparent 5px);
}
.btn-toggle > .handle {
  position: absolute;
  top: -0.2875rem;
  left: 0.3875rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
  border: 1px solid #ccc;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 2.4175rem;
  transition: left 0.25s;
}
.btn-toggle.active:before {
  opacity: 0.5;
}
.btn-toggle.active:after {
  opacity: 1;
  color: #F47280;
}
.btn-toggle.active {
  background-color: #F47280;
}
</style>

</head>
<body>
<div class="container">
    <div class="jumbotron df-bg-primary">
        <div class="df-switch">
            <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                <div class="inner-handle"></div>
                <div class="handle"></div>
            </button>
        </div>
    </div>
    <div class="jumbotron bg-white">
        <div class="df-switch">
            <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                <div class="inner-handle"></div>
                <div class="handle"></div>
            </button>
        </div>
    </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