title: How to overcome subtle conflicts between Bootstrap.js and Avada WordPress theme
body: <p>We have been developing a WordPress website using the Avada WordPress theme. This site is integrated with WHMCS using a premium WHMCS template called Responsio+.</p>
  
  <p>The problem seems to be a conflict between Avada and bootstrap.js which is used by Responsio+. For a quick view of this problem you can go to the author's <a href="http://demo.whmcsconnect.com/wordpress/avada/modals/" rel="nofollow">Responsio+ Demo for Avada</a>. Click the <code>Modal Button</code> button and observe the popup immediately disappear.</p>
  
  <p>My suspicion is that Avada started with Bootstrap CSS/JS code early on since I see Avada selectors of <code>bs.modal</code>, etc. </p>
  
  <p>Since I am not willing to give up the Avada theme, and I would like to use Responsio+ as well, does anyone see how I might include Responsio+'s main wrapper class/id in all of bootstrap.js event trigger selectors so they quit firing on Avada modal popups? I believe Responsio+ uses only bootstrap.min.js.</p>
  
  <p>There are other conflicts, like in the toggles shortcode, but I'm sure the solution will be the same.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>All of Avada's modal popups have a wrapper of <code>&lt;div class="fusion-modal ... &gt;</code>. All of the Bootstrap modal popups are wrapped with Responsio+'s <code>&lt;div id="imsync-wrapper"&gt;</code> wrapper.</p>
  
  <p>My thought is that there is some way to slightly modify the bootstrap.js event trigger selectors to only fire on Responsio+'s modals.</p>
  
  <p>I don't like modifying a dist file like this, but it's either that or take several steps backwards. I didn't think it would be major to add #imsync-wrapper to bootstrap.js modal code, but maybe it's not so simple. Thing is, I'm not exactly positive where this change would be most effective and I think I am asking for a Bootstrap pro to weigh in.</p>
  
  <p>Also, I tried putting the modal plugin in noConflict() mode. Placing the following before <code>&lt;/head&gt;</code> doesn't seem to help:</p>
  
  <pre><code>&lt;script&gt;
      var bsModal = jQuery.fn.modal.noConflict();
  &lt;/script&gt;
  </code></pre>