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

[Author]

Posts

[Jean Rapenne]

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.

Regards.

Jean

[Waqar Supporter 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.

regards,
Waqar

[Jean Rapenne]

My issue is resolved now. Thank you!