And you have to set the max-height for both img and img container.Įqual height boxes - card with CSS class 'h-100' - broken when additional elements in one col. I am using mdb bootstrap card in my project so when i have various items or say Home page MDB 5 MDB jQuery MDB Angular MDB React MDB Vue Please use this code example. control it using custom CSS (for example, style' height: 10rem ' ) or Bootstrap's width of the Bootstrap card component is to use the Bootstrap grid (rows and columns): Automatically scales the media area's height to equal its width.īootstrap introduces a new UI component for creating cards which As can be seen, the card takes the full width of its container div. If you'd like to maintain a consistent width and height across cards, you'll need to set it in your styles: components inside your cards, you may want to instantiate ripples or other components. but it is making all cards stretch beyond the screen height.Ĭards contain content and links about a single subject. Hi, how would one adjust the cards to the same height and move footers to bottom in Marta Szymanska staff pro premium answered 4 years ago Hi, try the code from here.