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 - Join Our Community Call-to-Action Banner Section With Tailwind CSS

Join Our Community Call-to-Action Banner Section With Tailwind CSS

Tailwind
DocsAllOver - Bootstrap 5 Responsive Service Pricing Table Block

Bootstrap 5 Responsive Service Pricing Table Block

Bootstrap
DocsAllOver - Owl Carousel Responsive CSS-Only Team Section Showcase.

Owl Carousel Responsive CSS-Only Team Section Showcase

CSS
DocsAllOver - Tailwind CSS Subscribe Container with Integrated Footer

Tailwind CSS Subscribe Container with Integrated Footer

Tailwind
DocsAllOver - Responsive Bootstrap 5 Detailed Features Section

Responsive Bootstrap 5 Detailed Features Section

Bootstrap
DocsAllOver - Responsive CSS-Only Glassmorphism Login Form with background image

Responsive CSS-Only Glassmorphism Login Form with background image

CSS
DocsAllOver - Responsive Tailwind CSS Hero Section and Adaptive Navbar

Responsive Tailwind CSS Hero Section and Adaptive Navbar

Tailwind
DocsAllOver - Responsive Bootstrap 5 Compact FAQ Accordion Display

Responsive Bootstrap 5 Compact FAQ Accordion Display

Bootstrap
DocsAllOver - Responsive CSS Only Services Section with Hover Effects

Responsive CSS Only Services Section with Hover Effects

CSS
DocsAllOver - Responsive Tailwind CSS Team Members Display Showcase

Responsive Tailwind CSS Team Members Display Showcase

Tailwind
DocsAllOver - Responsive Bootstrap 5 Clear Process Flow Component

Responsive Bootstrap 5 Clear Process Flow Component

Bootstrap
DocsAllOver - Responsive Interactive Login & Register Form with CSS & JS Transitions

Responsive Interactive Login & Register Form with CSS & JS Transitions

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