Bootstrap 3 Toggle Switch buttons

This bootstrap snippet called "Bootstrap 3 Toggle Switch buttons" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: buttons

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


              	  
<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>
                

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


              	  

                
body{margin-top:20px;}                            
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview


              	  
$('.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');
       
});
               

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: Apr 21st 2014, 12:34

Views: 16.3K

Rated 5/5 based on 8 reviews