Hi, everyone!
I am creating this ticket as a way of helping us have one place to gather all issues related to Bootstrap-related CSS styling conflicts with themes and plugins.
Allow me to start with a short explanation to why these things happen.
Toolset Plugins use the Bootstrap Framework which provides CSS and JS rules and functions that are applied to certain HTML classes.
When another Theme, or Plugin, uses the same Classes in its HTML, the Bootstrap Framework tries to style those with its rules and functions. But a Theme or Plugin might be using those exact same HTML classes without using Bootstrap Framework, and add their own Styles and Functions to it.
Now, when both Toolset and such a Theme or plugin are used together, the Frameworks start to conflict. Each wants to do its job, and often you will see that suddenly your Theme's or Plugin's design is different.
This is actually completely expected and can be solved by either:
- Not using Bootstrap in Toolset (go to Toolset -> Settings and scroll to the "Bootstrap loading" section and select "This site is not using Bootstrap CSS" option - see the attached image).
- Adding Custom CSS to resolve the conflicts.
For the DIVI theme we try to gather all issues, and provide ready-to-go solutions or even a future development of a style sheet loaded specifically for this theme.
If you encounter such issues, please read this thread first and see if it's already reported + eventually solved. If it is not, report it here.
We will look into it and eventually provide a solution right away or in a closer future.