Woocommerce Conflicts with Bootstrap 4 in WordPress

I can’t give up on either functionalities: Woocommerce and Bootstrap. A conflict occurs with the wonky looking layout when using Woocommerce and Bootstrap 4 together. See the breakdown when you are on the checkout page. Below a few CSS lines would resolve the wonkiness issue really quick. Now I can enjoy both!

CSS

.woocommerce .col-1, .woocommerce .col-2 { 
    max-width:none; 
}
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row { 
    display: block; 
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { 
    max-width: unset; 
}

Leave a Reply

Your email address will not be published. Required fields are marked *