Update to 2.4.8 : Bootstrap problem

I’m a happy user of Sparklin since several years. Today I updated to version 2,4,8 and discovered that the Boostrap tabs stopped working,

Looking into the theme files I have seen that the Bootstrap js has been updated to 4.0.0, but the css is still for Bootstrap 3, which may explain the problem.

What I have tried:

  • I downloaded the latest Bootstrap 4 (4.6.0) to my child theme, dequeued the sparkling bootstrap js and css and enqueued the Bootstrap 4.6.0 in my child theme, and with that the tabs work again (albeit with some other probems, probably due to other CSS files in my child theme being for Bootstrap 3 and not 4).

  • Then I did the same thing with Bootstrap 3.4.1, and now everything works, except that I have lost some Sparkling styling that has been overwritten by Bootstrap - but that can be fixed

With the changes in the version of jQuery that comes with Wordpress 5.6, it is clear that the version 3.3.7 of Bootstrap that was previously used in Sparkling had to be updated, but you could have updated to 3.4.1 to avoid complications in child themes, or you could have made it possible to select to use either Bootstrap 3 or 4.

At least you need to provide css-files with the same version of Bootstrap as the js.

– christer

1 Like

Hey there

Let me see it, please provide url of the website with the tabs

My tabs also do not work with wp 5.6 and the latest sparkling theme 2.4.8.

URL to a page on my staging site which uses Sparkling 2.4.8 with no changes. As you can see the tab only shows the first tab content, while the others come up empty:

URL to the same page on my production site where I have replaced bootstrap.min.js and bootstrap.min.css shipped with Sparkling 2.4.8 with the version 3.4.1 of both files. As you can see the tab works:

I did not make any changes in the Sparkling code, but instead added the 3.4.1 bootstrap files in my child theme and added this to the function.php of the child theme:

 // ============= Load our own Bootstrap ==========================
function my_enqueue_scripts() {
  wp_dequeue_style( 'sparkling-bootstrap');
  wp_enqueue_style( 'aravis-bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
  wp_enqueue_script( 'aravis-bootstrap', get_stylesheet_directory_uri() .'/bootstrap/js/bootstrap.min.js',array('jquery' ),false,true );
add_action( 'wp_enqueue_scriptsX', 'my_enqueue_scripts', 80 );

Please notice the priority parameter in add_action that assures that my_enqueue_scripts is run later then the enqueue-scripts function in Sparkling.

Hi @christer

Thank you for an explanation, yes I see the problem and I reported it to the developers, it will be fixed in the future updates of the theme.

right now you can use the solution you have, its the best solution,

Hi @christer and @marx-veix
The issue is fixed in Tabs are not working · Issue #248 · ColorlibHQ/Sparkling · GitHub
You can have the latest code from github.
Colorlib Support

1 Like

Thanks again @mahendra.pratap4022 :slight_smile:

I will mark this case as resolved

1 Like