title: How to create bootstrap switch
body: <p>One of my web designer given template for making <code>bootstrap switch</code>.I compiled it and rendered on top of page.it's displaying <code>checkbox</code>.</p>
  
  <p>template Code:</p>
  
  <pre><code> &lt;script id="switchTemp" type="text/x-handlebars-template"&gt;
      &lt;div class="span16 mr1 headerToggleDiv" style="height:42px;"&gt;
      &lt;div class="switch switch-square pull-right" data-off-label="1" data-on-label="2"&gt;&lt;input type="checkbox" id="switchBox"/&gt;&lt;/div&gt;
      &lt;/div&gt; 
  &lt;/script&gt;
  </code></pre>
  
  <p>using <a href="http://www.bootstrap-switch.org/" rel="nofollow noreferrer">this</a>, I tried in the following way.</p>
  
  <pre><code>  $('#switchBox').wrap('&lt;div class="switch switch-square pull-right has-switch" /&gt;').parent().bootstrapSwitch();
  </code></pre>
  
  <p>getting small with default names(on,off),like in the following way.</p>
  
  <p><img src="https://i.stack.imgur.com/x8hGV.png" alt="enter image description here"></p>
  
  <p>I want in the following way.</p>
  
  <p><img src="https://i.stack.imgur.com/WTqNv.png" alt="enter image description here"></p>
  
  <p>I want <code>1,2</code> instead of <code>on,off</code> as a labels.</p>
  
  <p>can anyone help me.</p>
  
  <p>Thanks</p>