CLASS 'mb-*' not working when added element using jquery .after()

[razorkyle]

class 'mb-3' not working after adding new element using jQuery .after(), plea see image below (current display and inspect tab)

CURRENT DISPLAY

INSPECT TAB

Reduced test cases

jQuery v3.7.1

script

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.3

[razorkyle]

additional information, all the elements are inside 'card-body' class

COMPOSITION
card-group > card > card-body > form > row > col

[julien-deramond]

Hi @razorkyle
I transformed your issue into a discussion, as it's not really a Bootstrap issue since .mb-2 is just a regular class that simply does margin-bottom: .5rem !important (regular CSS).

[patkon]

.card-body (you're parent container) using display: flex. So you can try to using Gap:
https://getbootstrap.com/docs/5.3/utilities/spacing/#gap