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 - Responsive Blog Grid with Tailwind CSS

Responsive Blog Grid with Tailwind CSS

Tailwind
DocsAllOver - User-Friendly Travel Booking Form in Bootstrap 5

User-Friendly Travel Booking Form in Bootstrap 5

CSS
DocsAllOver - Responsive CSS3 Pricing Table with Hover Animation

Responsive CSS3 Pricing Table with Hover Animation

CSS
DocsAllOver - Responsive Contact Us Forms in Bootstrap 5

Responsive Contact Us Forms in Bootstrap 5

Bootstrap
DocsAllOver - Notification UI Design with Navbar in Bootstrap 5

Notification UI Design with Navbar in Bootstrap 5

Bootstrap
DocsAllOver - Interactive Social Media Buttons with CSS and JS

Interactive Social Media Buttons with CSS and JS

CSS
DocsAllOver - Lightweight FAQ Accordion Component with CSS

Lightweight FAQ Accordion Component with CSS

CSS
DocsAllOver - Responsive Registration Form Page with Image in Tailwind

Responsive Registration Form Page with Image in Tailwind

Tailwind
DocsAllOver - Timeline Roadmap Example in Tailwind CSS

Timeline Roadmap Example in Tailwind CSS

Tailwind
DocsAllOver - Notification Page Design Examples in Bootstrap 5

Notification Page Design Examples in Bootstrap 5

Bootstrap
DocsAllOver - Need Help Support Page with Search in Bootstrap 5

Need Help Support Page with Search in Bootstrap 5

Bootstrap
DocsAllOver - Responsive Get In Touch Contact Form in Tailwind CSS

Responsive Get In Touch Contact Form in Tailwind CSS

Tailwind

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