Bootstrap Switch Button

Bootstrap Switch Button example : Bootstrap switch buttons are used to provide the switch functionality. You need to add js and css file in order to create and use the bootstrap switch buttons. We are going to create swith button step by step and demo with online editor. You can edit code and see output online with our online editor.

Bootstrap Switch Button Example with demo

Steps to create switch buttons in bootstrap –

• Include – bootstrap-switch.min.css – Download this file and keep in your css folder or include it from cdn.
• Include – bootstrap-switch.min.js – Download this file and keep in your js folder or include it from cdn.

We have included these files from cdn.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

Here is an Example with Demo – Try It :

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 [Default 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>

The Above Example Will Produce output something like this-

Add Comment

📖 Read More

• 1. Bootstrap form control states
• 2. Bootstrap Panels
• 3. Bootstrap Disable Enable button jQuery
• 4. Bootstrap Registration Page Templates