Hit enter after type your search item

7 Demos of Bootstrap toggle/switch by Checkbox and radio button

The Bootstrap toggle switches by using checkbox and radio button

In this tutorial, I am going to show you a plug-in that can be used for creating nice looking switches by turning radio buttons or checkboxes that uses the Bootstrap framework.

Toggle Switch sizes  colors example various text in toggle switch

A Short Video of this Tutorial for Quick Idea

It requires you adding a few dependency files that include Bootstrap CSS and JS file, jQuery library and plug-in JS and CSS files.

If your project is already based on Bootstrap framework then web page would not be heavy-weight as such plug-in’s files are small in size, especially if you use minified versions.

A demo of simple On / Off switch

In this demo, a checkbox is created that acts as a toggle switch. The default value is checked so the switch is On initially. See a demo online followed by some details to set up:

Bootstrap toggle switch

See online demo and code

In the demo, you can see four buttons to Set the true/false state of switch or checkbox. The toggle button will reverse the current mode. While the Get button returns the current value of the checkbox. If checked, it will return true, otherwise, false.

Follow these steps to set up this switch / toggle plug-in for your web page:

Step 1:

Include the Bootstrap and bootstrap-switch CSS files in the <head> section:

<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<link href=”css/bootstrap-switch/bootstrap-switch.css” rel=”stylesheet”>

(Place it at your desired location, if not referring from the CDN)

Step 2:

Place the jQuery library, highlight.js, bootstrap-switch.js and main.js files just above the </body> tag.

You may get all these files by downloading the package from the plug-in page from GitHub website (credit: Mattia Larentis)

Step 3:

The markup section where a checkbox is created with an id:

<input id=”switch-state” type=”checkbox” checked>

All four buttons are assigned related data attributes for performing a certain action.

Get the complete code from the demo page.

A demo of creating differently sized toggle buttons

You may also create differently sized switches other than the above example. You may set the size by using data-size attribute and assigning it any of the following values:

  • mini
  • small
  • normal
  • large

See this example where I created four checkboxes (switches) with different sizes.

Bootstrap checkbox switch sizes

See online demo and code

The following markup is used for creating these switches:


Get the complete code from the demo page.

A demo of using different colors for On or true state

You may use different colors for the switch other than default blue, as used in above examples. By using the data-on-color data attribute, you may set different color values, for example:

  • danger for red
  • success for green
  • info for light blue
  • primary (default) for dark blue
  • warning for orange

(Typical colors of Bootstrap framework)

See the example below where switches in Bootstrap are created with all these colors for ON/True states.

Bootstrap checkbox switch colors

See online demo and code

This is the markup for above example for creating multi-colored switches:

A demo of creating Off/false state colored switches

Just like I created On color switches by using data-on-color attribute, you may create off color toggle switches by using the data-off-color attribute with the same color specification.

See the following demo where Bootstrap switches are created with different colors for both; On and Off states:

Bootstrap checkbox toggle color-off

See online demo and code

The markup for creating off/on various colored switches:

A demo of using custom text/captions in switches

In all above examples, I used On and Off text for the switches. Practically, you will need different captions to choose for the users. For example, select Yes or No, True or false, Agree or Disagree by clicking a toggle switch.

By using the data-on-text and data-off-text attributes, you may use any text as per the need of the situation.

See the following example where I created three switches with the text as follows:

  • Yes / No
  • True / False
  • Agree / Disagree

Along with text, various colors are used by using related data attributes:

Bootstrap switch text

See online demo and code

The markup:

A demo of dealing with the width of Bootstrap toggle switches

Use the data-handle-width data attribute with the value like 100, 150, 200 etc. for setting the width of switches. In above examples, you have seen the switches adjusted according to the given text.

In this demo, width is set by using data attribute. See the above example with various width sizes:

Bootstrap switch width

See online demo and code

The markup with various attributed including width:

Converting radio buttons into toggle switches demo

In all above examples, the checkboxes are used as switches. You may also use radio buttons for converting those to switches as well.

In this demo, three radio buttons are used for creating switches with different data attributes like setting the color. See the demo and code by clicking the links below:

Bootstrap radio switch

See online demo and code

The markup:


 

Read more about the available options by visiting the plug-in page (link provided with credit in above section).

This div height required for enabling the sticky sidebar