Jumpy Accordion (Collapse) in Bootstrap

Today I found out that my bootstrap 4 accordion (collapse) is little bit jumpy at the moment it's hidden. A little research on google took me to this link: https://github.com/twbs/bootstrap/issues/12093. Fortunately, someone pointed out a solution to this problem.

It turns out to be a padding error. The problem is happened when you have padding on the collapse target div.

<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Accordion Button
  </button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

So, if you want to add some padding at collapsed target,  you should put the CSS code into class "card" (refer to example code above). If you add into class "collapse" instead, you'll have "jumpy" accordion like mine.