Bootstrap is a popular choice among web developers for building interactive webpage designs. Bootstrap has come along a long way with multiple releases and enriched content with every new release. Bootstrap has a wide community that has also contributed newer packages that have made working with Bootstrap easier. In this article, we shall deal with changing the background color of the toggle switch in Bootstrap 4. Bootstrap 4 provides a custom-switch class by default which is used to create toggle switch and the custom-control-input class deals with the background color and border color of the switch. In Bootstrap 4, the background color of the toggle switch is blue. This color can be changed by manipulating the custom-control-input class. There is another method to change the color using external libraries with a wide range of color classes. We shall discuss both the methods in the examples below.
This approach creates the toggle switch using the predefined custom-switch class and the color is altered by specifying the required color in the custom-control-input classes. This method includes a great deal of coding as one must repeat the entire code for a different color. This makes it cumbersome.
The second method eliminates the extra efforts required in the first method to specify the color changes for each and every custom-control-input class. This is a better and sophisticated approach as it does not include lengthy coding. The method makes use of the Bootstrap Switch Button package available on Github. It is an open-source library and works with all Bootstrap 4 components. This library has predefined classes that help us define a color for the toggle switch. The data-onstyle attribute of the input tag is responsible for setting the toggle switch color. The color options available are similar to Buttons in Bootstrap 4. The data-toggle attribute specifies that the checkbox is a switch button and the data-width attribute specifies the width of the toggle switch. The checked attribute denotes that when the page loads the switch is already checked and can be unchecked as per requirement.
- How to Create Toggle Switch by using HTML and CSS ?
- Difference between background and background-color
- HTML | Change Background color using onmouseover property
- How to change background color of canvas-type text using Fabric.js ?
- How to change background color of a canvas circle using Fabric.js ?
- How to change selection background color of a canvas circle using Fabric.js ?
- How to change the background color of the active nav-item?
- How to change navigation bar color in Bootstrap ?
- How to change Hamburger Toggler color in Bootstrap ?
- How to change font color of the active nav-item in Bootstrap ?
- How to change font color in dropdown navbar when collapsed in bootstrap ?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- Data-toggle attributes in Twitter Bootstrap
- How to create a radio button similar to toggle button using Bootstrap ?
- Program to Change RGB color model to HSV color model
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.