Bootstrap Card Header not sticking to the top

Solution:


When you use Bootstrap 4 Card with Header and Footer, make sure you include Card Body or else, the Header and the footer won't align to their respective positions.

e.g:
div class="card"
div class="card-header"
div class="card-body
div class="card-footer

Remember to close your divs and test your code