Card Decks

2 minutes
Share the link to this page
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.


Hello, in this bootstrap four video, we're going to look at card decks, card decks allow you to group cards together. But if one or two of your cards have different heights, it automatically adjusts the height of all your cards. So they match basically the tallest chord. This is fantastic because we've developed websites before in the past where we've had to do this and we've had to use manual CSS jQuery code. And bootstrap provides a means to handle this. It's really simple.

All you have to do is create a couple of divs and these first two Daisy first div has a class of called dash, dash wrapper. Then you predict inside it which has a class of called dash deck and inside here, you put your cards need to create him as you normally would. So I'm going to keep it simple and copy or cut and paste this card into here, indented, like. So what I'm gonna do is copy and paste it two more times. So the three different cards. And what I will do is just copy and paste this text.

So this will be the tallest or make the other edge, one slightly taller. And then if we save this, I'm actually going to add a few brake lines because otherwise, just touching the bottom of the page. So if we just go back refresh, there we go. We have three different chords, or we vary in height in terms of the amount of content it's gotten there. But the height of the actual chord that the user sees is the same, and K matches this one. Often.

This is fantastic. You have to add any custom CSS or jQuery to detect The content inside and automatically adjust the bootstrap does it for you. I wish we had this feature when you're doing a website before because it would have saved us so much time and effort. If you have any questions about this or anything at all, feel free to post it on our education platform sonar learn in Dakota, UK for slash question dot php. There'll be a link in the description. Plus, there'll be another link in the description to the source code from this video and the source code from every other video in this series.

Please rate, comment and subscribe. It does help us provide more content to you on a regular basis. And as usual, thank you for watching and I hope you have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.