[Resolved] bootstrap issues

[Author]

Posts

[malagaS]

Tell us what you are trying to do? choose the right bootstrap settings

Is there any documentation that you are following? n/a

Is there a similar example that we can see? n/a

What is the link to your site?

hidden link is an example of a page that works with the toolset setting 'Toolset should load Bootstrap 4' (but when I do this the below example toggles don't work - 2 of them expand and 2 of them expand for only a second then close.)

and hidden link is a page that only works with the toolset setting 'The theme or another plugin is already loading Bootstrap 4' (but when I do this, the above example columns overlap and fonts are wrong.)

thank you.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Looking into the code of the pages that you shared, it seems that the active theme Avada is already loading Bootstrap 3 components.

Based on this, it would be better to set the Bootstrap loading option to "The theme or another plugin is already loading Bootstrap 3".

Let me know how it goes and in case the issue still persists, you're welcome to share temporary admin login details so that I can see the effects of different Bootstrap options.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[malagaS]

thank you but if I do anything other than 'Toolset should load Bootstrap 4' it breaks some stuff. for example the attached. (thumbnails should go across not down)

[Waqar]

Thanks for writing back.

You're experiencing these conflicts because some of the elements of the website are dependant on the HTML structure and CSS styles from Bootstrap 4 (like the image thumbnails from your screenshot), while other elements are controlled by the Avada theme's Bootstrap 3 styles.

Additionally, the Avada theme's version "6.2.3" that you have on the website is also about a year old:
hidden link

To avoid/limit these conflicts, I'll recommend the following steps:

1. Make a complete backup copy of the website.

2. Update the Avada theme to the latest version 7.3.1 and always keep, WordPress, theme, and plugins up-to-date.

3. If you still experience style conflicts with the 'Toolset should load Bootstrap 4' option like the collapse and the grid items, I'll need the temporary admin access details, to troubleshoot them one-by-one, and suggest some fixes or workaround, accordingly.

If you're not comfortable with the troubleshooting on the live website, you can alternatively share the website's clone/snapshot.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )

I'm setting your next reply as private again.

[malagaS]

somehow the Avada registration code fell off so it hadn't been showing available updates. it's updated now, and the problem remains.

[malagaS]

sorry - I need the private message. thanks.

[Waqar]

Sure, I'm setting the next reply as private again.

[Waqar]

Thank you for waiting as this troubleshooting turned out more complicated than I initially expected.

To fix the conflict of Accordion from Avada with Bootstrap 4, you can include the following CSS code in the generic custom CSS section:
( for example the custom CSS section in Avada options )

.accordian.fusion-accordian .collapse.show {
    display: block;
}

To fix the script conflict for the accordion collapse items, you can include this script in the generic script section:
( for example the custom CSS section in Avada options -> Advanced -> Code Fields -> Space before </body> )

<script>

jQuery(document).ready(function(){
	jQuery(".collapse").on('show.bs.collapse', function(e) {
		var grandParent = jQuery(this).parents('.accordian.fusion-accordian');
		var resultsShow = jQuery(grandParent).find('.panel-collapse.collapse.show').length;
		if(resultsShow == 1) {
			jQuery(grandParent).find('.panel-collapse.collapse.show').removeClass('show');
		}
		var resultsIn = jQuery(grandParent).find('.panel-collapse.collapse.in').length;
		if(resultsIn == 1) {
			jQuery(grandParent).find('.panel-collapse.collapse.in').removeClass('in');
		}
	})
});

</script>

This code should help in fixing accordions across the website.

[malagaS]

That worked, thank you!!!