title: jQuery UI messes up Bootstrap Button toggle group
body: <p>I have this element</p>
  <pre><code>&lt;div id=&quot;someid&quot; class=&quot;btn-group btn-group-toggle&quot; data-toggle=&quot;buttons&quot;&gt;
  </code></pre>
  <p>that get's messed up with jQuery UI as</p>
  <pre><code>&lt;div id=&quot;someid&quot; class=&quot;btn-group btn-group-toggle ui-button ui-corner-all ui-widget&quot; data-toggle=&quot;buttons&quot; role=&quot;button&quot;&gt;
  </code></pre>
  <p>I am not sure what causes this as it works without issues on some pages.  Also works without issues based on how the fields get arranged on a page!</p>
  <p>The buttons go from this clean image</p>
  <p><a href="https://i.stack.imgur.com/3TnP1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3TnP1.png" alt="enter image description here" /></a></p>
  <p>to this image with an annoying extra border around plus no longer is a group.</p>
  <p><a href="https://i.stack.imgur.com/2Gs5P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Gs5P.png" alt="enter image description here" /></a></p>
  <p>I can go to the browser and manually delete the ui elements and the button is back to normal.  Or if I disabled jquery ui script from loading, then also it brings the button back to normal!  How do I fix this issue?</p>