card-body in different levels of in Bootstrap5

Question

I am following a web application tutorial on Youtube and come into a question. As you can see from the code

<div class="card card-body">
 ...
</div>

The output is like

If I put card and card-body in different , the output would be strange.

<div class="card">
     <div class="card-body">
      ...
     </div>
</div>

Since I am new to Bootstrap5, this case makes me very confused. Of course the first one is the one I want but I still want to know the reason behind it. Could someone please explain it? Thank you.

Answer 1

It can be a css rules that overwite the bootstrap with !important.

card(parent) and card-body(child) is the correct way according to docs so you should do it like that.

<div class="card">
     <div class="card-body">
      ...
     </div>
</div>