Skip Navigation

[Resolved] Problems with Bootstrap 4 and DIVI 4 woocommerce

This support ticket is created 4 years, 2 months 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Francisco Ramón Molina Busquiel 4 years, 2 months ago.

Assisted by: Waqar.

Author
Posts
#1459285

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: hidden link
hidden link
hidden 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

#1461363

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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:
hidden 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

#1461597

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

Regards,
Jose

#1461601

My issue is resolved now. Thank you Waqar!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.