Table of contents
1.
Introduction
2.
What is Bootstrap Toggle Button?
3.
Toggle Buttons Used Areas
4.
Why Bootstrap Over HTML?
4.1.
Toggle Button Example
5.
Switch Button
6.
Bootstrap Toggle Button with Disabled Attribute
7.
More Examples for Toggle Button in Bootstrap
7.1.
Stacked Checkboxes
7.2.
Inline Checkboxes
7.3.
Options
7.4.
Methods
7.5.
Table with States, Examples, and Descriptions\
7.6.
Event Propagation
7.7.
API vs Input
7.8.
Sizes
7.8.1.
Colors
7.8.2.
Custom Style
7.8.3.
Custom Text
7.8.4.
Icons/HTML Text
7.9.
Multiple Lines of Text
8.
Frequently Asked Questions
8.1.
What is the use of toggle in Bootstrap?
8.2.
How to increase the size of a button in Bootstrap?
8.3.
What color are Bootstrap buttons disabled?
9.
Conclusion
Last Updated: Jan 19, 2025
Medium

Bootstrap Toggle Button

Author Riya Singh
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In web development, user interface design plays a pivotal role in enhancing user experience. One integral element that adds both functionality and aesthetics to web interfaces is the toggle button. Among the myriad of tools available, Bootstrap Toggle Button stands out as a versatile and user-friendly component, offering developers a seamless way to implement interactive switches, checkboxes, and more. 

Bootstrap Toggle Button

 In this article, we'll explore the Bootstrap toggle button in depth, providing insights into its usage, customization, and best practices.

What is Bootstrap Toggle Button?

A Bootstrap toggle button is an interactive element that allows users to switch between two states, such as on/off or true/false. It's a stylized checkbox or radio button that provides a more engaging and intuitive user interface element for actions that have an immediate effect.

Toggle Buttons Used Areas

Toggle buttons can be used:

  • Navigation Bars: Toggle buttons serve as navigation toggles, allowing users to collapse or expand menus for a cleaner and responsive navigation experience.
  • Form Controls: Toggle buttons are applied to checkboxes or switches in forms, providing an intuitive way to toggle between different states or options.
  • Filtering Options: In data-heavy applications, toggle buttons enable users to filter content dynamically, switching between various views or filter criteria.
  • Dark/Light Mode Switches: Toggle buttons are commonly used to implement dark/light mode switches, giving users control over the interface's visual theme.
  • Accordion Panels: Toggle buttons can be integrated into accordion panels, allowing users to expand or collapse content sections based on their preferences.
  • Mobile App Interfaces: Toggle buttons are prevalent in mobile app interfaces, facilitating the toggling of settings, modes, or navigation drawers.
  • Show/Hide Elements: Toggle buttons hide or reveal elements on a web page, enhancing user interactions and providing a more streamlined user experience.

Why Bootstrap Over HTML?

While HTML provides basic form elements, Bootstrap enhances these with additional styling and behavior. 

Bootstrap Over HTML

Bootstrap toggle buttons come with built-in responsive design, stateful classes, and JavaScript plugins, offering a more polished look and feel with minimal effort.

Toggle Button Example

Here's a simple example of a Bootstrap toggle button:


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

This code snippet creates a toggle switch that users can click or tap to change its state. The checked attribute sets the initial state to "on".

Switch Button

A switch button is a graphical representation of a toggle button that mimics a physical switch. Bootstrap provides a sleek switch design that can be easily implemented:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

Bootstrap Toggle Button with Disabled Attribute

Sometimes, you may need to display a toggle button that is not currently interactive:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitchDisabled">
  <label class="custom-control-label" for="customSwitchDisabled">Disabled switch element</label>
</div>

 

The disabled attribute ensures the user cannot interact with the toggle until it is enabled.

More Examples for Toggle Button in Bootstrap

Bootstrap allows for various customizations, such as stacked checkboxes for grouping multiple options or inline checkboxes for a more compact layout.

Stacked Checkboxes


<div class="form-group">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Option 1</label>
  </div>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck2">
    <label class="custom-control-label" for="customCheck2">Option 2</label>
  </div>
</div>

Inline Checkboxes

<div class="form-group">
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customInlineCheck1">
    <label class="custom-control-label" for="customInlineCheck1">Option 1</label>
  </div>
  <div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customInlineCheck2">
    <label class="custom-control-label" for="customInlineCheck2">Option 2</label>
  </div>
</div>

Options

Bootstrap toggle buttons come with a variety of options that can be set using data attributes or JavaScript. For example, data-toggle="toggle" activates the toggle button, and data-size="lg" would make it larger.

Methods

Bootstrap provides methods to programmatically interact with the toggle button. For instance, $('#toggle').bootstrapToggle('on') would set the toggle state to on.

Table with States, Examples, and Descriptions\

StateExample CodeDescription
On<input type="checkbox" checked>The toggle is in the "on" position.
Off<input type="checkbox"> The toggle is in the "off" position.
Disabled<input type="checkbox" disabled>The toggle is non-interactive.

On <input type="checkbox" checked> The toggle is in the "on" position.

Off <input type="checkbox"> The toggle is in the "off" position.

Disabled <input type="checkbox" disabled> The toggle is non-interactive.

Event Propagation

Event propagation in Bootstrap toggle buttons works similarly to other form elements. Events bubble up through the DOM, allowing for event delegation.

API vs Input

The Bootstrap toggle API provides additional methods for interaction and control, while the input element handles the basic toggle functionality.

Sizes

Bootstrap toggle buttons can be resized using the data-width and data-height options. This is useful for creating buttons that fit well with the overall design of your site.


<input type="checkbox" data-toggle="toggle" data-size="sm">
<input type="checkbox" data-toggle="toggle" data-size="lg">

Colors

Customize the color of your toggle buttons using data-offstyle and data-onstyle to set the color when the toggle is off or on, respectively.

<input type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">

Custom Style

Beyond predefined styles, Bootstrap allows for custom styling using CSS classes or inline styles to match your brand or design requirements.

Custom Text

You can set custom text for the on and off states using data-on and data-off.

<input type="checkbox" data-toggle="toggle" data-on="Enabled" data-off="Disabled">

Icons/HTML Text

Bootstrap toggle buttons can include icons or HTML by using the data-on and data-off attributes with HTML content.

<input type="checkbox" data-toggle="toggle" data-on="<i class='fas fa-play'></i> Play" data-off="<i class='fas fa-pause'></i> Pause">

Multiple Lines of Text

For more complex labels, you can use HTML to include multiple lines of text within your toggle button labels.

<input type="checkbox" data-toggle="toggle" data-on="<div>Line 1<br>Line 2</div>" data-off="Single Line">

Frequently Asked Questions

What is the use of toggle in Bootstrap?

The data-toggle attribute in Bootstrap enables toggling features like modals, tooltips, dropdowns, and collapsible content with minimal JavaScript.

How to increase the size of a button in Bootstrap?

To increase a button's size in Bootstrap, use classes like btn-lg for large buttons or btn-sm for small buttons.

What color are Bootstrap buttons disabled?

Disabled Bootstrap buttons typically appear in a lighter, muted gray color, indicating they are inactive and non-interactive.

Conclusion

Bootstrap toggle buttons are versatile and user-friendly components that enhance the interactivity of web forms and settings. With extensive customization options and easy implementation, they provide a seamless user experience across different devices and screen sizes. By mastering Bootstrap toggle buttons, you can ensure your web projects are not only functional but also aesthetically pleasing and accessible.

You can refer to our guided paths on the Code360. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Live masterclass