Bootstrap -> cards: auto height adjustment not working
Hey, I was playing around with bootstrap cards to get a sensible layout for my blog but I just can't get them to work. They are responsive enough but I just can't get the auto-height adjustment to work...
Here is the codepen link: https://codepen.io/wzvroegp-the-solid/pen/poYNmvr
3 Replies
Im no expert in bootstrap, but this happens because of the inline style
height on the container and the align-items-center-class. (the flex-items will shrink to the minimum size they need)
you could remove both those properties and use padding to create space at the top and bottom
other option is to wrap both of those cards and center that within the container1. Don’t use Bootstrap
2. Use flexbox
3.
align-items: stretch
4. Sort out the cards to handle the shorter one now having extra space at the bottom with either grid (with text having 1fr) or flexbox (with text having flex-grow: 1)Not quite sure but i searched it up on bootstrap you could try using the class 'card-deck' on the container that contains both of these card if you want em both to have the same height nd width
I would also suggest this.