Skip Navigation

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

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 52 replies, has 12 voices.

Last updated by CharlesB2907 6 years, 7 months ago.

Assisted by: Beda.

Author
Posts
#590285

Dario
Supporter
toolset-bootstrap-settings.png

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.

#590339
sec01.jpg
sec02.jpg
sec03.jpg
sec04.jpg
sec05.jpg
sec06.jpg

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,

#590535

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.

#590692
2017-11-17_20-16-42.jpg
2017-11-17_20-16-25.jpg

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.

#592449

Any progress with these problems?

#592525

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.

#592528

Ok. Thanks Mohammed.

#592662
2017-11-23_20-30-38.jpg
2017-11-23_20-29-33.jpg

Alignment problems.
hidden link

Look at the screenshots.

Best regards,
Francisco R.

#593903

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.

#593929

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.

#593931

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?

#593933
2017-11-28_12-13-51-2.jpg

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

#598878

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

#598898

Thank you Francisco

I pushed... Again.

I will update you here with news ASAP.

#598901

Ok. Thanks for the help Beda.