Card Groups

2 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€94.09
List Price:  €131.73
You save:  €37.64
£80.33
List Price:  £112.47
You save:  £32.13
CA$137.95
List Price:  CA$193.14
You save:  CA$55.18
A$155.90
List Price:  A$218.27
You save:  A$62.36
S$136.45
List Price:  S$191.03
You save:  S$54.58
HK$783.08
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
NZ$169.94
List Price:  NZ$237.92
You save:  NZ$67.98
د.إ367.20
List Price:  د.إ514.10
You save:  د.إ146.89
৳10,968.60
List Price:  ৳15,356.49
You save:  ৳4,387.88
₹8,361.11
List Price:  ₹11,705.89
You save:  ₹3,344.78
RM479.15
List Price:  RM670.83
You save:  RM191.68
₦120,104.65
List Price:  ₦168,151.32
You save:  ₦48,046.66
₨27,798.84
List Price:  ₨38,919.49
You save:  ₨11,120.65
฿3,667.03
List Price:  ฿5,133.99
You save:  ฿1,466.96
₺3,248.77
List Price:  ₺4,548.41
You save:  ₺1,299.64
B$518.45
List Price:  B$725.86
You save:  B$207.40
R1,905.92
List Price:  R2,668.37
You save:  R762.44
Лв184.07
List Price:  Лв257.70
You save:  Лв73.63
₩139,257.60
List Price:  ₩194,966.22
You save:  ₩55,708.61
₪377.23
List Price:  ₪528.13
You save:  ₪150.90
₱5,695.28
List Price:  ₱7,973.62
You save:  ₱2,278.34
¥15,458.12
List Price:  ¥21,641.98
You save:  ¥6,183.86
MX$1,680.99
List Price:  MX$2,353.45
You save:  MX$672.46
QR365.97
List Price:  QR512.38
You save:  QR146.40
P1,384.25
List Price:  P1,938
You save:  P553.75
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,851.82
List Price:  E£6,792.74
You save:  E£1,940.92
ብር5,709.83
List Price:  ብር7,993.99
You save:  ብር2,284.16
Kz83,396.59
List Price:  Kz116,758.56
You save:  Kz33,361.97
CLP$97,269.27
List Price:  CLP$136,180.87
You save:  CLP$38,911.60
CN¥723.78
List Price:  CN¥1,013.33
You save:  CN¥289.54
RD$5,930.22
List Price:  RD$8,302.55
You save:  RD$2,372.32
DA13,484.73
List Price:  DA18,879.17
You save:  DA5,394.43
FJ$227.82
List Price:  FJ$318.96
You save:  FJ$91.14
Q778.21
List Price:  Q1,089.53
You save:  Q311.31
GY$20,908.09
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
DH1,015.88
List Price:  DH1,422.27
You save:  DH406.39
L1,779.82
List Price:  L2,491.82
You save:  L712
ден5,791.90
List Price:  ден8,108.89
You save:  ден2,316.99
MOP$805.91
List Price:  MOP$1,128.31
You save:  MOP$322.39
N$1,902.84
List Price:  N$2,664.06
You save:  N$761.21
C$3,694.12
List Price:  C$5,171.92
You save:  C$1,477.79
रु13,341.25
List Price:  रु18,678.28
You save:  रु5,337.03
S/371.93
List Price:  S/520.72
You save:  S/148.78
K379.86
List Price:  K531.82
You save:  K151.96
SAR375.07
List Price:  SAR525.11
You save:  SAR150.04
ZK2,516.51
List Price:  ZK3,523.21
You save:  ZK1,006.70
L468.24
List Price:  L655.55
You save:  L187.31
Kč2,375.47
List Price:  Kč3,325.75
You save:  Kč950.28
Ft37,163.97
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
ARS$86,820.40
List Price:  ARS$121,552.04
You save:  ARS$34,731.63
Bs693.54
List Price:  Bs970.99
You save:  Bs277.44
COP$387,000.37
List Price:  COP$541,816
You save:  COP$154,815.63
₡50,265.75
List Price:  ₡70,374.06
You save:  ₡20,108.31
L2,477.69
List Price:  L3,468.86
You save:  L991.17
₲740,341.68
List Price:  ₲1,036,507.98
You save:  ₲296,166.29
$U3,889.78
List Price:  $U5,445.86
You save:  $U1,556.07
zł407.99
List Price:  zł571.20
You save:  zł163.21
Already have an account? Log In

Transcript

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.

Sign Up

Share

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.