Bootstrap 4 Toggle Switch with Custom Text Labels

Bootstrap 4 Toggle Switch with Custom Text Labels
Copy link
Oct. 5, 2024
Bootstrap, Bootstrap 4
Full Screen 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Bootstrap Button Toggle (On/Off Switch) Example </title>
  <link rel='stylesheet'
    href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
</head>

<body>

  <main>

    <div class="jumbotron text-center text-primary">
      <h1 class="text-primary">On/Off Switch</h1>
      <p class="lead">Bootstrap Button Toggle</p>
    </div>
    <div class="container example">
      <div class="row">
        <div class="col-sm-2">
          <h6>Large</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-lg btn-toggle active" data-toggle="button" aria-pressed="true"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Default</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-toggle active" data-toggle="button" aria-pressed="true"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Small</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-sm btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-sm btn-toggle active" data-toggle="button" aria-pressed="true"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Mini</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-xs btn-toggle active" data-toggle="button" aria-pressed="true"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

    </div>



    <!-- Secondary Color -->

    <div class="container example">

      <div class="row">
        <div class="col-sm-12">
          <h3>Secondary Color <small>(Brand Secondary)</small></h3>
        </div>
      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Large</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-lg btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-lg btn-secondary btn-toggle active" data-toggle="button"
            aria-pressed="true" autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Default</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Small</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-sm btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-sm btn-secondary btn-toggle active" data-toggle="button"
            aria-pressed="true" autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>

      <div class="row">

        <div class="col-sm-2">
          <h6>Mini</h6>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false"
            autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

        <div class="col-sm-5">
          <button type="button" class="btn btn-xs btn-secondary btn-toggle active" data-toggle="button"
            aria-pressed="true" autocomplete="off">
            <div class="handle"></div>
          </button>
        </div>

      </div>


    </div><!-- /.container -->
    <!-- END EDMO HTML (Happy Coding!)-->
  </main>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>

</html>
                                            
                                        

body {
  font-family: 'Montserrat', 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
  color: #6b7381;
  background: #f2f2f2;
}
.jumbotron {
  background: #6b7381;
  color: #bdc1c8;
}
.jumbotron h1 {
  color: #fff;
}
.example {
  margin: 4rem auto;
}
.example > .row {
  margin-top: 2rem;
  height: 5rem;
  vertical-align: middle;
  text-align: center;
  border: 1px solid rgba(189, 193, 200, 0.5);
}
.example > .row:first-of-type {
  border: none;
  height: auto;
  text-align: left;
}
.example h3 {
  font-weight: 400;
}
.example h3 > small {
  font-weight: 200;
  font-size: 0.75em;
  color: #939aa5;
}
.example h6 {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 3.32px;
  text-transform: uppercase;
  color: #bdc1c8;
  margin: 0;
  line-height: 5rem;
}
.example .btn-toggle {
  top: 50%;
  transform: translateY(-50%);
}
.btn-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
}
.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: 'Off';
  left: -4rem;
}
.btn-toggle:after {
  content: 'On';
  right: -4rem;
  opacity: 0.5;
}
.btn-toggle > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.active:before {
  opacity: 0.5;
}
.btn-toggle.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  display: none;
}
.btn-toggle:before,
.btn-toggle:after {
  color: #6b7381;
}
.btn-toggle.active {
  background-color: #29b5a8;
}
.btn-toggle.btn-lg {
  margin: 0 5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 2.5rem;
  width: 5rem;
  border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
  outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
  line-height: 2.5rem;
  width: 5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-lg:before {
  content: 'Off';
  left: -5rem;
}
.btn-toggle.btn-lg:after {
  content: 'On';
  right: -5rem;
  opacity: 0.5;
}
.btn-toggle.btn-lg > .handle {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
  left: 2.8125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-lg.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
  line-height: 0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.6875rem;
  width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
  display: none;
}
.btn-toggle.btn-sm {
  margin: 0 0.5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
}
.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm:focus.active,
.btn-toggle.btn-sm.focus.active {
  outline: none;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: 1.5rem;
  width: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-sm:before {
  content: 'Off';
  left: -0.5rem;
}
.btn-toggle.btn-sm:after {
  content: 'On';
  right: -0.5rem;
  opacity: 0.5;
}
.btn-toggle.btn-sm > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-sm.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-xs:before,
.btn-toggle.btn-sm.btn-xs:after {
  display: none;
}
.btn-toggle.btn-xs {
  margin: 0 0;
  padding: 0;
  position: relative;
  border: none;
  height: 1rem;
  width: 2rem;
  border-radius: 1rem;
}
.btn-toggle.btn-xs:focus,
.btn-toggle.btn-xs.focus,
.btn-toggle.btn-xs:focus.active,
.btn-toggle.btn-xs.focus.active {
  outline: none;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  line-height: 1rem;
  width: 0;
  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.btn-xs:before {
  content: 'Off';
  left: 0;
}
.btn-toggle.btn-xs:after {
  content: 'On';
  right: 0;
  opacity: 0.5;
}
.btn-toggle.btn-xs > .handle {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-xs.active > .handle {
  left: 1.125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-xs.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-sm:before,
.btn-toggle.btn-xs.btn-sm:after {
  line-height: -1rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.275rem;
  width: 1.55rem;
}
.btn-toggle.btn-xs.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-xs.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-xs:before,
.btn-toggle.btn-xs.btn-xs:after {
  display: none;
}
.btn-toggle.btn-secondary {
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle.btn-secondary:before,
.btn-toggle.btn-secondary:after {
  color: #6b7381;
}
.btn-toggle.btn-secondary.active {
  background-color: #ff8300;
}

                                        

//Doesn't require any JS.

This Bootstrap 4 snippet provides a customizable toggle switch component with custom text labels for each state. It offers a visually appealing and interactive way to allow users to toggle between different options or settings. The toggle switch is designed to be responsive and adaptable to various screen sizes, ensuring a consistent user experience across different devices.

Key Features:

  • Customizable Text Labels: Easily modify the text labels displayed for each state of the toggle switch to match your specific requirements.
  • Responsive Design: The toggle switch adapts to different screen sizes, ensuring a consistent appearance and functionality on various devices.
  • Visually Appealing: The toggle switch incorporates a modern and visually appealing design, enhancing the overall user experience.
  • Easy to Use: The toggle switch is intuitive and straightforward for users to interact with, making it a convenient way to present options.
  • Lightweight and Efficient: The code is optimized for performance, ensuring a fast and efficient user experience.

Implementation:

  • Include Bootstrap 4: Ensure you have Bootstrap 4 installed and configured in your project.
  • Create the HTML Structure: Set up the basic HTML structure for the toggle switch, including the container, toggle input, and custom labels.
  • Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the toggle switch and its elements, such as form-check, form-check-input, form-check-label, and custom-control-label.
  • Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and behavior of the toggle switch according to your specific requirements.
Latest Snippets
View All
DocsAllOver - Stylish Tailwind Contact Form with Image in Tailwind CSS

Stylish Contact Form with Image in Tailwind CSS

Tailwind
DocsAllOver - Responsive Registration Form with Image in Tailwind CSS

Responsive Registration Form with Image in Tailwind CSS

Tailwind
DocsAllOver - Bootstrap 5 Payment Method Form Page with Invoice

Bootstrap 5 Payment Method Form Page with Invoice

Bootstrap
DocsAllOver - Modern Pricing Table Design with Bootstrap 4

Modern Pricing Table Design with Bootstrap 4

Bootstrap
DocsAllOver - Responsive Multi-Level Drop-Down Navigation Menu in CSS

Responsive Multi-Level Drop-Down Navigation Menu in CSS

CSS
DocsAllOver - Interactive Bottom Navigation Bar Indicator with CSS

Interactive Bottom Navigation Bar Indicator with CSS

CSS
DocsAllOver - Real-time Password Strength Indicator in Bootstrap 5

Real-time Password Strength Indicator in Bootstrap 5

Bootstrap
DocsAllOver - Responsive Video Card Component for Tailwind CSS

Responsive Video Card Component for Tailwind CSS

Tailwind
DocsAllOver - Responsive Feature Highlight Component with Tailwind CSS

Responsive Feature Highlight Component with Tailwind CSS

Tailwind
DocsAllOver - Multi-Step Form with International Phone Input and Nice Select

Multi-Step Form with International Phone Input and Nice Select

Bootstrap
DocsAllOver - Responsive Review Cards Component with CSS3

Responsive Review Cards Component with CSS3

CSS
DocsAllOver - Responsive CSS3 Timeline Design With Hover Effects

Responsive CSS3 Timeline Design With Hover Effects

CSS

Building Blocks for Your Web Pages

Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.

Bootstrap

Browse Snippets

Tailwind

Browse Snippets

CSS

Browse Snippets
See More Categories

DocsAllOver

Where knowledge is just a click away ! DocsAllOver is a one-stop-shop for all your software programming needs, from beginner tutorials to advanced documentation

Get In Touch

We'd love to hear from you! Get in touch and let's collaborate on something great

Quick Links

Home Search Link In Bio Privacy Policy

Popular Links

Technical Docs FAQ's Tools Blogs
Copyright copyright © Docsallover - Your One Shop Stop For Documentation