Menu
As the title states, there appears to be css conflicts between Bootstrap 4.1 and Stripe's elements api. I've been digging around attempting to find confirmation of this and a possible solution but to no avail.
Below is the source code to recreate this issue along with a couple of fiddles for live examples. Has anyone seen this before / know of a solution?
Fiddle without including bootstrap 4.1
Fiddle WITH bootstrap 4.1
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<!-- When below three lines are included, stripe elements are incorrectly rendered -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
var stripe = Stripe($('#spk').val());
var elements = stripe.elements();
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
lineHeight: '24px'
}
};
var card = elements.create('card', {style: style});
card.mount('#card-element');
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
var form = document.getElementById('paymentMethodForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
var form = document.getElementById('paymentMethodForm');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
form.submit();
}
});
</script>
</head>
<body>
<div style="width:400px;">
<!-- sample test key from stripe website -->
<input type="hidden" id="spk" value="pk_test_TYooMQauvdEDq54NiTphI7jx"/>
<form action="/" method="POST" id="paymentMethodForm" class="d-block">
<div class="form-row">
<label for="card-element">Credit or debit card</label>
<div id="card-element" style="">
</div>
<div class="alert-danger text-center" id="card-errors" role="alert"></div>
</div>
<div class="text-center">
<br/>
<button class="btn btn-primary">Add Payment Method</button>
</div>
</form>
</div>
</body>
</html>
984
This CSS will fix it:
.form-row {
display: inherit;
}
Bootstrap has it set to display: flex.
Check this fiddle.
88
answered Nov 21 '25 09:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With