title: Copy to clipboard in bootstrap 3
body: <p>I want to add a "copy to clipboard" button on my website. The site uses the Bootstrap 3 framework. I want my button to work similarly to the "Copy to Clipboard" button used here: <a href="http://twitterbootstrapbuttons.w3masters.nl/" rel="noreferrer">http://twitterbootstrapbuttons.w3masters.nl/</a></p>
  
  <p>I tried to incorporate this code: <a href="http://jsfiddle.net/T2uXr/" rel="noreferrer">http://jsfiddle.net/T2uXr/</a>, but I have had no success with it.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$("a.copy").on('click', function (e) {
    e.preventDefault();
  }).each(function () {
    $(this).zclip({
      path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
      copy: function() {
        return $(this).data('copy');
      }
    });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    padding: 20px
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;hr /&gt;
  
  &lt;h5&gt;These copy to clipboard links are working...&lt;/h5&gt;
  
  &lt;p&gt;&lt;a href="#" data-copy="http://test.one.com/" class="copy"&gt;Copy Original Link&lt;/a&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;a href="#" data-copy="http://test.two.com/" class="copy"&gt;Copy Medium Link&lt;/a&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;a href="#" data-copy="http://test.three.com/" class="copy"&gt;Copy Web Link&lt;/a&gt;&lt;/p&gt;
  
  &lt;hr /&gt;
  
  &lt;h5&gt;If I put these links inside the bootstrap dropdown, they stop working...&lt;/h5&gt;
  
  &lt;div class="btn-group"&gt;
                    &lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                      View copy clipboard links
                      &lt;span class="caret"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#" data-copy="http://test.one.com/" class="copy"&gt;Copy Original Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-copy="http://test.two.com/" class="copy"&gt;Copy Medium Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-copy="http://test.three.com/" class="copy"&gt;Copy Web Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="mailto:" title="Email URL Links"&gt;Email URL Link&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas on how I should add this to a button on my Bootstrap 3 site? Or are there any other good alternatives?</p>
  
  <p>Thanks! :)</p>