Multiple Rows

3 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
€93.59
List Price:  €131.03
You save:  €37.43
£80.45
List Price:  £112.64
You save:  £32.18
CA$136.81
List Price:  CA$191.54
You save:  CA$54.73
A$153.85
List Price:  A$215.39
You save:  A$61.54
S$136.10
List Price:  S$190.55
You save:  S$54.44
HK$783.19
List Price:  HK$1,096.50
You save:  HK$313.30
CHF 91.41
List Price:  CHF 127.98
You save:  CHF 36.57
NOK kr1,095.33
List Price:  NOK kr1,533.51
You save:  NOK kr438.17
DKK kr697.93
List Price:  DKK kr977.13
You save:  DKK kr279.20
NZ$168.49
List Price:  NZ$235.89
You save:  NZ$67.40
د.إ367.25
List Price:  د.إ514.16
You save:  د.إ146.91
৳10,960.96
List Price:  ৳15,345.79
You save:  ৳4,384.82
₹8,331.14
List Price:  ₹11,663.93
You save:  ₹3,332.78
RM477.70
List Price:  RM668.80
You save:  RM191.10
₦126,037.39
List Price:  ₦176,457.39
You save:  ₦50,420
₨27,728.08
List Price:  ₨38,820.43
You save:  ₨11,092.34
฿3,701.79
List Price:  ฿5,182.66
You save:  ฿1,480.86
₺3,251.67
List Price:  ₺4,552.47
You save:  ₺1,300.80
B$513.17
List Price:  B$718.47
You save:  B$205.29
R1,913.51
List Price:  R2,678.99
You save:  R765.48
Лв183.04
List Price:  Лв256.26
You save:  Лв73.22
₩137,500.16
List Price:  ₩192,505.72
You save:  ₩55,005.56
₪376.08
List Price:  ₪526.53
You save:  ₪150.44
₱5,758.67
List Price:  ₱8,062.37
You save:  ₱2,303.69
¥15,492.10
List Price:  ¥21,689.56
You save:  ¥6,197.46
MX$1,697.24
List Price:  MX$2,376.20
You save:  MX$678.96
QR362.79
List Price:  QR507.92
You save:  QR145.13
P1,387.12
List Price:  P1,942.02
You save:  P554.90
KSh13,448.65
List Price:  KSh18,828.65
You save:  KSh5,380
E£4,787.02
List Price:  E£6,702.02
You save:  E£1,915
ብር5,664.26
List Price:  ብር7,930.19
You save:  ብር2,265.93
Kz83,485.81
List Price:  Kz116,883.48
You save:  Kz33,397.66
CLP$95,360.46
List Price:  CLP$133,508.46
You save:  CLP$38,148
CN¥724.53
List Price:  CN¥1,014.38
You save:  CN¥289.84
RD$5,902.47
List Price:  RD$8,263.69
You save:  RD$2,361.22
DA13,439.62
List Price:  DA18,816
You save:  DA5,376.38
FJ$229.29
List Price:  FJ$321.01
You save:  FJ$91.72
Q776.47
List Price:  Q1,087.09
You save:  Q310.61
GY$20,894.43
List Price:  GY$29,253.04
You save:  GY$8,358.61
ISK kr14,065.59
List Price:  ISK kr19,692.39
You save:  ISK kr5,626.80
DH1,009.26
List Price:  DH1,413.01
You save:  DH403.74
L1,779.82
List Price:  L2,491.82
You save:  L712
ден5,758.50
List Price:  ден8,062.13
You save:  ден2,303.63
MOP$806.12
List Price:  MOP$1,128.60
You save:  MOP$322.48
N$1,913.23
List Price:  N$2,678.60
You save:  N$765.36
C$3,661.78
List Price:  C$5,126.64
You save:  C$1,464.86
रु13,321.12
List Price:  रु18,650.11
You save:  रु5,328.98
S/368.06
List Price:  S/515.29
You save:  S/147.23
K378.12
List Price:  K529.39
You save:  K151.26
SAR375.03
List Price:  SAR525.05
You save:  SAR150.02
ZK2,574.10
List Price:  ZK3,603.84
You save:  ZK1,029.74
L465.65
List Price:  L651.93
You save:  L186.28
Kč2,362.20
List Price:  Kč3,307.17
You save:  Kč944.97
Ft36,810.41
List Price:  Ft51,536.04
You save:  Ft14,725.63
SEK kr1,086.49
List Price:  SEK kr1,521.13
You save:  SEK kr434.64
ARS$87,266.68
List Price:  ARS$122,176.84
You save:  ARS$34,910.16
Bs687.45
List Price:  Bs962.46
You save:  Bs275.01
COP$390,268.69
List Price:  COP$546,391.78
You save:  COP$156,123.08
₡50,117.34
List Price:  ₡70,166.29
You save:  ₡20,048.94
L2,455.43
List Price:  L3,437.70
You save:  L982.27
₲738,156.27
List Price:  ₲1,033,448.32
You save:  ₲295,292.04
$U3,836.09
List Price:  $U5,370.68
You save:  $U1,534.59
zł404.46
List Price:  zł566.27
You save:  zł161.80
Already have an account? Log In

Transcript

Hello in this bootstrap four video, we're going to look at using multiple roles, or may have referred to having a bunch of elements and 13 elements going on to a different line as a row really shouldn't along and try not to, they're essentially lines. The reason they are rollers on the reader don't want to use rows for the only to get mixed up with the class row. And that's what we're talking about today. So if we just gone to our website, but here we have it on we are on the screen, so it's a medium, it's gonna stick to medium for now. We've got 444 Actually, no, sorry, we're on large. So we got free grid spaces, frequent spaces and frequent spaces and they are free remaining, let's say for one to add these items like they are again.

So I'm going to copy and paste this. Save it, refresh and they are working as they should be. Perhaps We don't want them to continue on from where the previous element left off. If there is enough space for it to continue past we want it to continue on a new row. And to do that, what we do is undo this, we simply outside of this row, do div class equals row. And now we put this content inside here, save that refresh.

And as you can see, this is actually on a separate row. Now, it's nothing to do with that. So if we were to either now add another item, I'm going to add two items. I'm going to chain these sois through to and to refresh There was enough space to fit one but not the other one. As you can see, this is still not on this line simply because it's in an entirely different role. Now, what we're doing this generally does not affect the positioning of this, obviously, they'll move it down and up.

But that's just due to the height of this particular row. So that's using multiple rows, most likely you will be using multiple rows. It's a great thing. It's great for sort of grouping items together. So if you have a website got a header or your stuff at the top, some banners durably in a separate row, you've got maybe some featured items, there have been a separate row at the bottom, you've got a footer, that will be in its own sort of row as well. So that's the difference.

I mean, that is using that's how you use multiple rows. If you have any questions, feel free to post them on so no learning code at UK for slash question dot php. There'll be a link in the description. Please rate, comment, answer scribe plus there'll be also another link in the description to the source code from this video if you want to check that out. And as usual, thank you 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.