Card Columns

4 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.73
You save:  €37.64
List Price:  £112.47
You save:  £32.13
List Price:  CA$193.14
You save:  CA$55.18
List Price:  A$218.27
You save:  A$62.36
List Price:  S$191.03
You save:  S$54.58
List Price:  HK$1,096.34
You save:  HK$313.26
CHF 91.31
List Price:  CHF 127.84
You save:  CHF 36.52
NOK kr1,099.13
List Price:  NOK kr1,538.83
You save:  NOK kr439.69
DKK kr702.04
List Price:  DKK kr982.89
You save:  DKK kr280.84
List Price:  NZ$237.92
You save:  NZ$67.98
List Price:  د.إ514.10
You save:  د.إ146.89
List Price:  ৳15,356.49
You save:  ৳4,387.88
List Price:  ₹11,705.89
You save:  ₹3,344.78
List Price:  RM670.83
You save:  RM191.68
List Price:  ₦168,151.32
You save:  ₦48,046.66
List Price:  ₨38,919.49
You save:  ₨11,120.65
List Price:  ฿5,133.99
You save:  ฿1,466.96
List Price:  ₺4,548.41
You save:  ₺1,299.64
List Price:  B$725.86
You save:  B$207.40
List Price:  R2,668.37
You save:  R762.44
List Price:  Лв257.70
You save:  Лв73.63
List Price:  ₩194,966.22
You save:  ₩55,708.61
List Price:  ₪528.13
You save:  ₪150.90
List Price:  ₱7,973.62
You save:  ₱2,278.34
List Price:  ¥21,641.98
You save:  ¥6,183.86
List Price:  MX$2,353.45
You save:  MX$672.46
List Price:  QR512.38
You save:  QR146.40
List Price:  P1,938
You save:  P553.75
List Price:  KSh18,408.68
You save:  KSh5,260
List Price:  E£6,792.74
You save:  E£1,940.92
List Price:  ብር7,993.99
You save:  ብር2,284.16
List Price:  Kz116,758.56
You save:  Kz33,361.97
List Price:  CLP$136,180.87
You save:  CLP$38,911.60
List Price:  CN¥1,013.33
You save:  CN¥289.54
List Price:  RD$8,302.55
You save:  RD$2,372.32
List Price:  DA18,879.17
You save:  DA5,394.43
List Price:  FJ$318.96
You save:  FJ$91.14
List Price:  Q1,089.53
You save:  Q311.31
List Price:  GY$29,272.17
You save:  GY$8,364.07
ISK kr14,179.58
List Price:  ISK kr19,851.98
You save:  ISK kr5,672.40
List Price:  DH1,422.27
You save:  DH406.39
List Price:  L2,491.82
You save:  L712
List Price:  ден8,108.89
You save:  ден2,316.99
List Price:  MOP$1,128.31
You save:  MOP$322.39
List Price:  N$2,664.06
You save:  N$761.21
List Price:  C$5,171.92
You save:  C$1,477.79
List Price:  रु18,678.28
You save:  रु5,337.03
List Price:  S/520.72
You save:  S/148.78
List Price:  K531.82
You save:  K151.96
List Price:  SAR525.11
You save:  SAR150.04
List Price:  ZK3,523.21
You save:  ZK1,006.70
List Price:  L655.55
You save:  L187.31
List Price:  Kč3,325.75
You save:  Kč950.28
List Price:  Ft52,031.05
You save:  Ft14,867.07
SEK kr1,095.61
List Price:  SEK kr1,533.90
You save:  SEK kr438.29
List Price:  ARS$121,552.04
You save:  ARS$34,731.63
List Price:  Bs970.99
You save:  Bs277.44
List Price:  COP$541,816
You save:  COP$154,815.63
List Price:  ₡70,374.06
You save:  ₡20,108.31
List Price:  L3,468.86
You save:  L991.17
List Price:  ₲1,036,507.98
You save:  ₲296,166.29
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł571.20
You save:  zł163.21
Already have an account? Log In


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.

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.