Bootstrap snippet: Bootstrap 3 Toggle Switch buttons

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: buttons



<div class="container bootstrap snippet"> <h2>Bootstrap Switch Button</h2> <p class="page-header">Simple Toggle Buttons for Bootstrap 3</p> <h4>Large</h4> <div class="btn-group btn-toggle"> <button class="btn btn-lg btn-default">ON</button> <button class="btn btn-lg btn-primary active">OFF</button> </div> <hr> <h4>Medium (default)</h4> <div class="btn-group btn-toggle"> <button class="btn btn-default">ON</button> <button class="btn btn-primary active">OFF</button> </div> <hr> <h4>Small</h4> <div class="btn-group btn-toggle"> <button class="btn btn-sm btn-default">ON</button> <button class="btn btn-sm btn-primary active">OFF</button> </div> <hr> <h4>Tiny</h4> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-default">ON</button> <button class="btn btn-xs btn-primary active">OFF</button> </div> <hr> <h4>More Switch Examples</h4> <ul class="list-inline"> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-default">ON</button> <button class="btn btn-xs btn-success active">OFF</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-default">ON</button> <button class="btn btn-xs btn-danger active">OFF</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-default">ON</button> <button class="btn btn-xs btn-info active">OFF</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-success">Y</button> <button class="btn btn-xs btn-danger active">N</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-default">1</button> <button class="btn btn-xs btn-primary active">0</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-primary active">Preview</button> <button class="btn btn-xs btn-default">Source Code</button> </div> </li> <li> <div class="btn-group btn-toggle"> <button class="btn btn-xs btn-info">Yes</button> <button class="btn btn-xs btn-primary active">No</button> </div> </li> </ul> <hr> <!-- collapse example --> <h4>Collapse (Show/Hide)</h4> <div class="btn-group btn-toggle"> <button class="btn btn-default" data-toggle="collapse" data-target="#collapsible">Open</button> <button class="btn btn-primary active" data-toggle="collapse" data-target="#collapsible">Close</button> </div> <div class="well collapse" id="collapsible"> Hello world. Here I am. </div> <hr> <!-- form radio buttons example --> <h4>Form Radio Buttons</h4> <form class="form"> <div class="btn-group btn-toggle" data-toggle="buttons"> <label class="btn btn-primary active"> <input name="options" value="option1" type="radio"> Option 1 </label> <label class="btn btn-default"> <input name="options" value="option2" checked="" type="radio"> Option 2 </label> </div> <button class="btn btn-default">Submit</button> </form> </div>
body{margin-top:20px;}
$('.btn-toggle').click(function() { $(this).find('.btn').toggleClass('active'); if ($(this).find('.btn-primary').size()>0) { $(this).find('.btn').toggleClass('btn-primary'); } if ($(this).find('.btn-danger').size()>0) { $(this).find('.btn').toggleClass('btn-danger'); } if ($(this).find('.btn-success').size()>0) { $(this).find('.btn').toggleClass('btn-success'); } if ($(this).find('.btn-info').size()>0) { $(this).find('.btn').toggleClass('btn-info'); } $(this).find('.btn').toggleClass('btn-default'); });
Dey-Dey

Bootstrap 3 Toggle Switch buttons

Dey-Dey
  Apr 21st 2014, 13:54
9.2K Views