[Gelöst] Problems with Bootstrap 4 and DIVI 4 woocommerce

[Author]

Artikel

[Francisco Ramón Molina Busquiel]

Hi,

I have observed that if I enable Bootstrap 4 in Toolset it does not cause problems in the DIVI container, so menus and page alignments are displayed correctly, however, some woocommerce pages are poorly rendered.
Look at the video: versteckter Link
versteckter Link
versteckter Link
I have talked to the DIVI support team and they have told me that Bootstrap allows you to set a prefix to avoid damaging other frameworks, so I think that if you in the Toolset configuration could specify a prefix for Bootstrap classes all incompatibilities with other frameworks could be solved.
What do you think about it?

Thanks for your help.

Regards,
Jose

[Waqar]

Hi Jose,

Thank you for waiting, while I performed some testing and research around this.

The layout/styling issues that you've reported are not specific to Divi or Toolset, but they are actually related to general compatibility between WooCommerce and Bootstrap.

By default, WooCommerce uses some class names (e.g. col-1, col-2) which are also common with Bootstrap's grid classes.

WooCommerce users have already reported this to their official support, who have written that they'll improve this at a suitable time:
versteckter Link

For now, a workaround can be to use some custom CSS code to override those common class styles:

.woocommerce-checkout form .col-1,
.woocommerce-checkout form .col-2,
.woocommerce-checkout form label,
.woocommerce-checkout form span,
.woocommerce-order .col-1,
.woocommerce-order .col-2 {
max-width: 100%;
width: 100%;
}

As for loading prefixed Bootstrap styles through Toolset, this has come up in our internal discussion and review, but it involves complex challenges related to performance, backward and future compatibility ( with Bootstrap and other themes and plugins which rely on it). In the future, something similar to this may get introduced, but we'll not be able to share any time estimate for this at the moment.

I hope this helps.

regards,
Waqar

[Francisco Ramón Molina Busquiel]

Thank you very much Waqar, with this workaround it works perfectly. 🙂

Regards,
Jose

[Francisco Ramón Molina Busquiel]

My issue is resolved now. Thank you Waqar!