Hello, in this bootstrap four video, we're going to show you card groups, which allow you to render cards as a single element which have an equal width and an equal height. So to do this, all you have to do is obviously, you're going to need multiple cards. So we'll just copy and paste the code got the moment in a second. So let's create a div. And the div has to have a class of card group and inside here, you simply put your cards. So I'm just gonna copy and paste the card or Katia actually into our card group just indented like so.

I'm just gonna copy and paste it two more times. can have as many as you want really bought gonna keep it simple now to add this storyline to the cards only use the built in classes. Just so you can see the difference between the three cards. This isn't necessary at all. So let's do called danger called inverse knife we just refresh our web browser, we have three different chords with an equal width and height. might be wondering, why doesn't the image take up the width of the column simply because the image isn't the width of the card, it has a different width.

So you would want to do a bit of CSS to make it adjust accordingly. And apart from that, that's called groups. There isn't much more to it than that just allows you to create a single attached element with an equal width and a equal height for all your cards. If you have any questions about this or anything else, feel free to post them on our education platform. So no learning code at UK forward slash question dot php. There'll be a link in the description plus there'll be another link in there.

Scription to source code from this video, please rate, comment and subscribe and it does really help keep the content free and he also helps us provide more content on a regular basis. And as usual, thanks for watching and I hope you have a great day.