[Resolved] Style conflicts with Bootstrap and 3rd Party Plugins or Themes.

[Author]

Posts

[Dario]

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.

[Francisco Ramón Molina Busquiel]

When a content template is created and assigned a background color, if Bootstrap is ON, margins are shown on the left and right of the page.
Look at the screenshots.
Best regards,

[Beda]

Thanks Francisco - this should be the Bootstrap Padding of 15 px.
It is a quite common issue with Bootstrap. We have also settings in Layouts (but Layouts only) that can remove them.
But Layouts should not be used with DIVI, hence, it is not solvable with a setting.

For now I will only file this issue and confirm it. Then we will find the best and most stable solution and share it.

Please proceed reporting issues like the above, this is perfect and will expedite the solution.

Thank you so much.

[Francisco Ramón Molina Busquiel]

In standard WordPress posts the Content Template defined with Toolset covers the whole page, however, in a new CPT the Content Template defined with Toolset does not cover the whole page.
I think this has something to do with the page definition of DIVI with respect to the page definition that Toolset does, however, I do not know exactly if it has to do with Bootstrap. But it is a problem that you will surely have to solve.
Look at the screenshots.

Best regards,
Francisco R.

[Francisco Ramón Molina Busquiel]

Any progress with these problems?

[Mohammed]

Hi Francisco,

I'm Mohammed, the Toolset support team leader.

At first, I would like to thank you for reporting this issue because this helps us a lot to improve our products and offer you better service.

This ticket is assigned to Nigel who is one of the best supporters in the team.He is working on your issue and will handle every request in this ticket.

So, please keep following this ticket and we will notify you once we find anything.

Thanks.

[Francisco Ramón Molina Busquiel]

Ok. Thanks Mohammed.

[Francisco Ramón Molina Busquiel]

Alignment problems.
hidden link

Look at the screenshots.

Best regards,
Francisco R.

[Beda]

Thank you Francisco.

I am sad that we do not have more participants here in this Thread, but then, I see that you basically already analyzed it so carefully that probably other people just will stumble over issues that you already reported.

So, I have now gathered all your reports here, and also tried to filter the ones you opened separately before we had this sticky post.
I passed over this information to our Developers and Documentation Editors, and they will make sure to provide solutions and a DOC for it in short.

[Francisco Ramón Molina Busquiel]

Beda, I hope you have had a great holiday.
It is possible that there are still problems arising from these problems, but I will not be able to indicate them until the current problems are solved, as I commented to your partner Nigel, in my humble opinion there should be a kind of feedback between us to see if what you are doing solves all the problems or just some and I must report more problems.
So if you need help to solve all these problems or try fixes or new versions on my site, you tell me.

Thanks for your help.

Best regards,
Francisco R.

[Beda]

Francisco, can you give me more details on the last post here?
https://toolset.com/forums/topic/style-conflicts-with-bootstrap-and-3rd-party-plugins-or-themes/#post-592662

Do you mean the issue you show there is not happening if you disable Bootstrap Loading?

[Francisco Ramón Molina Busquiel]

Yes. As you will see in the screenshot, without Boostrap the alignment of the elements is perfect.

[Francisco Ramón Molina Busquiel]

Look at this ticket for problems with the rendering of a woocommerce product page.
https://toolset.com/forums/topic/problems-with-the-rendering-of-views-in-footer-woocommerce-products/page/2/#post-598874

[Beda]

Thank you Francisco

I pushed... Again.

I will update you here with news ASAP.

[Francisco Ramón Molina Busquiel]

Ok. Thanks for the help Beda.