Hello, in this bootstrap four video, we're going to show you card columns, called columns allow you to organize your cards in a masonry style format. And basically what that allows you to do is put the card exactly on top of each other. What I mean by Imagine if you have 12 columns, I mean 12 columns, sorry. And on each row, you have three cards. So that will be a total of four rows and three cards per row. But each card has a varying height.
So you've got different content in there, some cards might not have images might have larger images, might have more text, no button, more button, etc, that sort of stuff. Now the result the overall card or each card is slightly different in height. Usually, if you had multiple cards, what would happen is that particular row that the card is on each row would be as tall as the tallest card and as a result, you get whites. So that doesn't look very professional. Using chord columns, you can simulate masonary style organization, essentially what Pinterest does, as you can see, you can see that all of these different cards essentially, are different heights. Because this one show in 20 years, a PlayStation is massive compared to this one, but that or essentially on top of each other, they don't have a big gap with each row.
That's essentially what we're implementing to do it. Luckily, in bootstrap four, it's really easy. In bootstrap three, this wasn't available. And we have a website is called vented Co. And that's just a anonymous social networking website that we made. And we have a masonary style affecting there. We use bootstrap free and we actually use a separate JavaScript library unfortunately for that, so he's just a bit more work but we bootstrap for it's all built and so without further ado, All you need to do is create a container, which is a div, make sure he has a class of car dash columns.
And inside here, columns need to spell it correctly. Inside here, you simply put all the cards that you want. So to keep it simple, I'm going to put a bunch of these cards in here. Let's just get all that sorted. So if I were to just copy and paste these quite a lot of time, so if I go back refresh you by thinking, yeah, doesn't really look any different that simply because all the calls are of the same height. But what I'm going to do is just in random chords, remove certain elements, so they have varying heights.
Okay for this one, I'll remove that. For this one, I'll remove the image and the button. Remove that, this one. Actually, for the first one, I'm going to have no image. I'm gonna have a lot of text. So I'm gonna copy and paste that a bunch of times.
Yeah, I'm happy that so far save that go back to him brother refresh. As you can see, they are now on top of each other. So even though this is really really tall, we essentially have almost three cards in the same space in the column that is next to it. If you just heard a noise there, I accidentally hit my pop filter by the mic. If you do that, then nothing went bad at all. So it's that simple to use a masonary stall effect.
Obviously, we just got a loan image here. It's got a toilet button, some text title on a button. This is obviously just a regular card that we had before. That's how you use masonry style organization in bootstrap for it's using colored columns. If you have any questions, feel free to post them on our education platform. Some are learning coda UK for slash question dot php, there'll be a link in the description to that.
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 as it does really help us grow and provide more content to you for free. And as usual, thank you for watching and have a great day.