See the screenshots to see the differences in the header on a page with Bootstrap:
hidden link
And on another page without Bootstrap:
hidden link
Please, tell me all the necessary CSS so that the header shows correctly, that is, as on the page that does not have the bootstrap. Taking into account that CSS should not affect the appearance of the header of the page that is not using bootstrap.
Thanks for your help.
Best regards,
Francisco R.
On both pages I see the exact same header, not what you show me in the screenshots.
Did you change the setup?
We are aware that DIVI overwrites native Bootstrap classes.
It has been evaluated if this is possible to fix on our end (even thou, it is a native Bootstrap Code that is used by thousands of websites) but there was no clean solution.
It has been decided that Custom CSS will need to be applied when differences surge, or to remove Bootstrap from the Toolset > Settings > General > Bootstrap loading.
The implications are that users cannot use Layouts plugin (not all Toolset, but only Layouts) with themes that have conflicting CSS. DIVI theme explicitly should not be used with Layouts.
These themes also come with their own page builders and now we offer to design templates with these builders.
So, the need to get Layouts working with these themes has dropped completely.
Can you disable bootstrap on your site?
Then it will not conflict anymore.
Otherwise you will need to adjust the CSS that DIVI overwrites.
Beda,
Is that there are so many problems that I can not attend correctly to all your support partners.
With Luo I am seeing these problems:
https://toolset.com/forums/topic/bad-appearance-of-the-elements-of-the-products-woocommerce-for-luo/
https://toolset.com/forums/topic/more-problems-with-css-with-divi-and-bootstrap/
So I had to disconnect the arrangements that Nigel told me in this other ticket:
https://toolset.com/forums/topic/bad-appearance-of-the-elements-of-the-products-woocommerce/
I am not using Toolset Layouts on the site.
If I want to use CRED on my website and the grids layouts for the archive pages I have to have Bootstrap connected.
Or is there another solution for DIVI to avoid having Bootstrap enabled and style CRED and grids layouts for archive pages?
Now I have re-enabled the arrangements that Nigel told me so that you can see the problem of the headers.
But it is quite chaotic to use Bootstrap and the DIVI CSS simultaneously.
With so many problems it is very difficult for me to move forward with the development of the web. ????
I think the Toolset development team should do a meeting and find a good solution for all these problems.
Thanks for your help Beda.
In the ideal case you do not use Bootstrap with DIVI.
If you need the features like the Bootstrap GRID or Bootstrap Style in CRED, and those start to conflict with the Theme, it needs custom CSS adjustments.
We cannot change this currently.
What I will ask is:
- create a DOC where we elaborate the needed changes of CSS
- evaluate methods to allow at least Bootstrap in GRID and CRED (eventually with fixes)
This will need several tests on a vanilla install on our side.
I will update you on the progress.
Please put ALL your tickets related to this on hold or close them.
Please share the links to them all here and mention shortly the exact issue that happens (if it's different from what I see already in your tickets)
Then I will inform our DOC creators and we will try to provide solutions.
In my humble opinion, you have 3 options:
1) DIVI users should not use Bootstrap in any case and you should provide CSS to adjust the styles of CRED and grids layouts to the appearance of DIVI (in my opinion the best solution).
2) Users must use Bootstrap in all pages (although this overloads the web pages) and you must provide the necessary CSS to correct all the problems of the interaction between Bootstrap CSS and DIVI CSS.
3) Users can connect Bootstrap only on the pages that they decide and you must provide the necessary CSS to correct all the problems of those pages for the interaction between the CSS of Bootstrap and the CSS of DIVI.
Next I indicate you the tickets that comment some of the problems that I am having:
https://toolset.com/forums/topic/multiple-problems-in-divi-header-by-bootstrap-very-very-urgent/
https://toolset.com/forums/topic/more-problems-with-css-with-divi-and-bootstrap/
https://toolset.com/forums/topic/bad-appearance-of-the-elements-of-the-products-woocommerce/
https://toolset.com/forums/topic/problem-displaying-the-divi-main-menu/
Thanks for your help Beda.
Thank you.
We cannot do this.
CSS and HTML are required knowledge sets in order to run Toolset.
We can also not add CSS fixes for every single theme that decides to use native Bootstrap classes but add the own CSS to it.
But we are discussing some solutions internally, please allow us the time to find a solution and I will update you here.
Thank you for the patience!
Beda, Any ideas on how to address all these problems?
Thanks for your help.
I just sent all the data today to the responsible developers and document writers.
The solution is to apply Custom CSS.
You can either await our official solutions to this, or meanwhile apply Custom CSS, but I suggest to wait for the official solution as that will make future updates easier for you.
Do you agree?
Beda, Could you give me an estimate of time so that you have some solution to these problems?
This is a very difficult statement.
If I say what it would take, it's maybe a week, maximally, to craft the codes and document them. Maybe even a short QA.
But we have several other features and Bugs that have a slight priority, and we cannot block the development of everything, so it takes longer.
But those are estimations, I cannot state a proper ETA with this information.
I will push again for a solution - a proper, developer crafted solution, and not a mix of CSS hacks from different supporters, who each has different ideas and approaches and design styles.
I hope you understand why I do not just put a few lines of CSS here that might solve the issues for now.
We need reliable, stable solutions, that all follow a minimal change in code and maximal effect, no compatibility issues can surge due to them, and it should not force it's styles either.
So, I will push as much I can for a fast solution on this, and I will keep you in the loop here in this ticket.
Again I also encourage other users to chime in here, as the more voices I have, the more I can push.
It is strange that other DIVI users are not indicating their problems here, but it is also true that many users who face these problems can decide not to use DIVI and only use Bootstrap, or not to use Toolset until these problems are solved. Also seeing some forum tickets I have seen some websites developed with DIVI and Toolset with enough problems, however, its creators, apparently, have been satisfied with these appearance problems. Everything lies in the requirement and purity that each developer has. Also, many DIVI developers may not have noticed all the problems that appear when Bootstrap is connected. But it is clear that all these problems, to people who understand design, hurt their eyes.
Thanks Beda for your information.
Our Developers started looking into the gathered issues.
That makes me very happy. 🙂
Thank you very much for the information Beda.
This ticket is closely related to https://toolset.com/forums/topic/style-conflicts-with-bootstrap-and-3rd-party-plugins-or-themes/.
As soon that ticket is solved, this is as well.
We can hence close this very ticket here, and follow up in the above linked one.
Thank you.
