Skip Navigation

[Resolved] Bootstrap4 Toolset CSS is causing conflict with my WooCommerce checkout page

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 2 replies, has 2 voices.

Last updated by Jean Rapenne 3 months, 3 weeks ago.

Assigned support staff: Waqar.


I have recorded a screencast. Please have a look - hidden link.

Further, the col-1 class is added via WooCommerce

It's the reason why I connect with you the Toolset plugin author to fix the issue.





Languages: English (English )

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

Hi Jean,

Thank you for contacting us and I'd be happy to assist.

This seems to be a style conflict, as both Bootstrap 4 and WooCommerce are using the same class names.

To overcome this, you can include the following CSS code at WP Admin -> Appearance -> Customize -> Additional CSS:

.woocommerce-checkout div[class*="col-"],
.woocommerce-checkout div[class*="col-"] label,
.woocommerce-checkout div[class*="col-"] .woocommerce-input-wrapper
{max-width: 100% !important;clear:both;width: 100%;}

I hope this helps and please let me know if you need any further assistance with this.



My issue is resolved now. Thank you!