Home > Articles > Details

Bootstrap Card Header not sticking to the top

How to Hide Div on Small Screen Using Bootstrap 5 Display UtilityClick to Watch Video


Please Login to see the rest of the answer
Answer:

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

[NB] If you want to align the div column to the bottom of the parent div using bootstrap4 follow the instruction below:
1. Make the parent div display flex, specify flex-column, then specify justify-content-between this will push all items inside the parent div to the position at the start and end of the parent div.

If you log in, you will be notified when someone leaves a comment.

Other users would like to know if this solution helped you.

Erin said:

If you want to apply the same effect to any div, for example, you want the column to not expand but to wrap content, I found what works:<br/> Just remove "col" to the div, the browser will still respect the div as a container, unlike when you apply "col" to the div, "col" comes with its own bootstrap specification e.g. padding margins, etc. This can work in a scenario when you want a div to stick to the bottom like self-align-baseline, use d-flex and align-items-end. This will align the div itself the base of the parent column. More to read on the link: https://getbootstrap.com/docs/4.0/utilities/flex/

Posted On: March 02, 2020 21:05:41 PM

© 2022 - ErnesTech - Privacy