How to create a toggle button in Bootstrap

Question

I originally created a web app in HTML  CSS and JavaScript  then was asked to create it again in Bootstrap too  I ve done it all fine  but I had toggle buttons in the web app that have changed back to radio  originally checkbox  buttons instead of the toggle buttons I had originally   The code for the buttons is    lt label gt    Notifications    lt span class  toggle  gt       lt input type  radio        class  notifications        name  notifications        id  notifications    gt     lt  span gt   lt  li gt   lt label gt    Preview    lt span class  toggle  gt       lt input type  radio        class  preview        name  preview        id  preview    gt     lt  span gt   lt  li gt    and the JavaScript and CSS files that the HTML page is linked to are    lt script src    jqtouch js  gt  lt  script gt   lt script src  jquery js  gt  lt  script gt   lt script src  js bootstrap js  gt  lt  script gt   lt link href  css bootstrap css  rel  stylesheet  gt   lt link href  css bootstrap-responsive css  rel  stylesheet  gt    Is there a way to change the code so I can get the toggle button back

User · Answer

You can use the Material Design Switch for Bootstrap 3 3 0   http   bootsnipp com snippets featured material-design-switch

User · Answer

Here this very usefull For Bootstrap Toggle Button   Example in code snippet   and jsfiddle below    x000D   x000D     lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D       lt link href  https   gitcdn github io bootstrap-toggle 2 2 2 css bootstrap-toggle min css  rel  stylesheet  gt  x000D       lt script src  https   gitcdn github io bootstrap-toggle 2 2 2 js bootstrap-toggle min js  gt  lt  script gt  x000D       lt link href  https   maxcdn bootstrapcdn com bootstrap 3 2 0 css bootstrap min css  rel  stylesheet  gt  x000D       lt input id  toggle-trigger  type  checkbox  checked data-toggle  toggle  gt  x000D       lt button class  btn btn-success  onclick  toggleOn    gt On by API lt  button gt  x000D   lt button class  btn btn-danger  onclick  toggleOff    gt Off by API lt  button gt  x000D   lt button class  btn btn-primary  onclick  getValue    gt Get Value lt  button gt  x000D   lt script gt  x000D      If you want to change it dynamically x000D    function toggleOn     x000D          toggle-trigger   bootstrapToggle  on   x000D      x000D    function toggleOff     x000D          toggle-trigger   bootstrapToggle  off     x000D      x000D      if you want get value x000D    function getValue   x000D      x000D     var value     toggle-trigger   bootstrapToggle   prop  checked    x000D     console log value   x000D      x000D   lt  script gt  x000D   x000D   x000D   I showed you a few examples above  I hope it helps  Js Fiddle is here  Source code is avaible on GitHub    Update 2020 For Bootstrap 4  I recommended bootstrap4-toggle in 2020    x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  integrity  sha384-Vkoo8x4CGsO3 Hhxv8T Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh  crossorigin  anonymous  gt  x000D   x000D   lt script src  https   code jquery com jquery-3 4 1 slim min js  integrity  sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  integrity  sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo  crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 4 1 js bootstrap min js  integrity  sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6  crossorigin  anonymous  gt  lt  script gt  x000D   x000D   lt link href  https   cdn jsdelivr net gh gitbrent bootstrap4-toggle 3 6 1 css bootstrap4-toggle min css  rel  stylesheet  gt  x000D   lt script src  https   cdn jsdelivr net gh gitbrent bootstrap4-toggle 3 6 1 js bootstrap4-toggle min js  gt  lt  script gt  x000D   x000D   lt input id  toggle-trigger  type  checkbox  checked data-toggle  toggle  data-onstyle  success  gt  x000D   lt button class  btn btn-success  onclick  toggleOn    gt On by API lt  button gt  x000D   lt button class  btn btn-danger  onclick  toggleOff    gt Off by API lt  button gt  x000D   lt button class  btn btn-primary  onclick  getValue    gt Get Value lt  button gt  x000D   x000D   lt script gt  x000D      If you want to change it dynamically x000D    function toggleOn     x000D          toggle-trigger   bootstrapToggle  on   x000D      x000D    function toggleOff     x000D          toggle-trigger   bootstrapToggle  off     x000D      x000D      if you want get value x000D    function getValue   x000D      x000D     var value     toggle-trigger   bootstrapToggle   prop  checked    x000D     console log value   x000D      x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Bootstrap 3 has options to create toggle buttons based on checkboxes or radio buttons: http://getbootstrap.com/javascript/#buttons

Checkboxes

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

Radio buttons

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

For these to work you must initialize .btns with Bootstrap's Javascript:

$('.btn').button();

User · Answer

If you want to keep a small code base  and you are only going to be needing the toggle button for a small part of the application  I would suggest instead maintain you re javascript code your self  angularjs  javascript  jquery  and just use plain CSS   Good toggle button generator  https   proto io freebies onoff

User · Answer

Initial answer from 2013 An excellent  unofficial  Bootstrap Switch is available    lt input type  quot checkbox quot  name  quot my-checkbox quot  checked gt     quot  name  my-checkbox   quot   bootstrapSwitch     It uses radio types or checkboxes as switches  A type attribute has been added since V 1 8  Source code is available on Github  Note from 2018 I would not recommend to use those kind of old Switch buttons now  as they always seemed to suffer of usability issues as pointed by many people  Please consider having a look at modern Switches like this one from the React Component framework  not Bootstrap related  but can be integrated in Bootstrap grid and UI though   Other implementations exist for Angular  View or jQuery   import     assets index less  import React from  react  import ReactDOM from  react-dom  import Switch from  rc-switch   class Switcher extends React Component     state         disabled  false         toggle        gt        this setState         disabled   this state disabled                render         return          lt div style    margin  20    gt           lt Switch           disabled  this state disabled            checkedChildren                 unCheckedChildren                 gt           lt  div gt         lt  div gt               ReactDOM render  lt Switcher   gt   document getElementById    react-content     Native Bootstrap Switches See ohkts11 s answer below about the native Bootstrap switches

User · Answer

Bootstrap 4 solution  bootstrap 4 ships built-in toggle  Here is the documentation  https   getbootstrap com docs 4 3 components forms  switches

User · Answer

You can use the CSS Toggle Switch library  Just include the CSS and program the JS yourself  http   ghinda net css-toggle-switch bootstrap html

User · Answer

If you don t mind changing your HTML  you can use the data-toggle attribute on  lt button gt s  See the Single toggle section of the button examples    lt button type  button  class  btn btn-primary  data-toggle  button  gt      Single toggle  lt  button gt

User · Answer

I ve been trying to activate  active  class manually with javascript  It s not as usable as a complete library  but for easy cases seems to be enough   var button       myToggleButton    button on  click   function          this  toggleClass  active          If you think carefully   active  class is used by bootstrap when the button is being pressed  not before or after that  our case   so there s no conflict in reuse the same class   Try this example and tell me if it fails  http   jsbin com oYoSALI 1 edit html js output

User · Answer

In case someone is still looking for a nice switch/toggle button, I followed Rick's suggestion and created a simple angular directive around it, angular-switch. Besides preferring a Windows styled switch, the total download is also much smaller (2kb vs 23kb minified css+js) compared to angular-bootstrap-switch and bootstrap-switch mentioned above together.

You would use it as follows. First include the required js and css file:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

And enable it in your angular app:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Now you are ready to use it as follows:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>

[javascript] How to create a toggle button in Bootstrap

The answer is

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to jqtouch

Tags