I tried to develop a simple Wordpress plugin which shows a bootstrap modal and unfortunately I failed.

The modal opens shortly but disappears directly again. This happens because the template Avada already loads something similar to Bootstrap. This leads to the conflict because Bootstrap is loaded multiple times.

I have no solution for this problem. I would like to use Bootstrap in my plugin independent of the template used.

If other plugin's developers included Bootstrap, every Bootstrap files will be loaded twice (or more). What if the user is using an old version of Bootstrap for a theme or a plugin?

Is there any way to include Bootstrap the right way so it does not create a conflict?

I hope you can help me.

    * Plugin Name:       Bootstrap Modal Test
    * Plugin URI:        http://
    * Description:       This is a short description of what the plugin does. It's displayed in the WordPress admin area.
    * Version:           1.0.0
    * Author:            Test
    * Author URI:        http://

    function enqueue_scripts() {
        wp_register_script( 'bootstrap_js', plugins_url( 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js' ) );
        wp_enqueue_script( 'bootstrap_js' );
        wp_register_script( 'jQuery', plugins_url( 'https://code.jquery.com/jquery-3.3.1.slim.min.js' ) );
        wp_enqueue_script( 'jQuery' );
    add_action( 'wp_enqueue_scripts', 'enqueue_scripts');

    function enqueue_styles() {
        wp_enqueue_style( 'bootstrap_css', plugins_url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css') );
    add_action( 'wp_enqueue_scripts', 'enqueue_styles');

    add_shortcode('modal_test', 'modal_test_frontend');

    function modal_test_frontend() {
        <div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>



  • Hello @Human - Welcome to the WordPress Development community! As it stands your question may happen in the context of WordPress, but it's not actually a question about WordPress, and as such may be considered off-topic for our site. Please take a moment to review the "How to Ask" page in our help center. That said, many web frameworks offer a "no conflict mode" to mitigate dependency collision - Bootstrap does, too. You should start there
    – bosco
    Sep 17, 2018 at 15:59

2 Answers 2


Sometimes it happens when the JavaScript for the Modal plugin gets loaded twice. Please check to make sure that it isn't getting double loaded. Some of the common ones are:

  • bootstrap.js (the full BootStrap JS suite)
  • bootstrap.min.js (same as above, just minified)
  • bootstrap-modal.js (the standalone plugin)

Similar Problem.

  • You can mark the answer as correct if it helped you. Sep 11, 2018 at 19:45
  • Many Thanks. That has been the problem. Unfortunately I can not remove the duplicates, so I adjusted my question above.
    – Human
    Sep 11, 2018 at 19:55

I added this JS and it worked fine. https://code.jquery.com/jquery-3.3.1.slim.min.js

Not the answer you're looking for? Browse other questions tagged or ask your own question.