Bootstrap 4 is breaking Stripe Elements

Question

I am trying to integrate Stripe with my Laravel site

in order to do this I am following the documentation on their website

https://stripe.com/docs/stripe-js/elements/quickstart

I can get to work with no errors, but something in bootstrap 4 is affecting the styling. If I drop the dependancy to a pre bootstrap 4 version it works.

This is what it looks like with bootstrap 4

and this is what is should look like and this is running with bootstrap 3

I have created two bootply examples to demostrate the issue

Broken Example

https://www.bootply.com/Tqz93y47Qe

Working Example

https://www.bootply.com/EvYkmKUPM3

Is there away to get stripe to ignore the bootstrap styling?

Answer 1

Use flex-column class with form-row

https://www.bootply.com/t8jij8fQOp

form-row is display flex and flex-direction row by default. Change it to flex-direction column using flex-column class

OR

Use w-100 class on card-element. It will give 100% width to that element

Updated bootply