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
€91.97
List Price:  €128.76
You save:  €36.79
£77.70
List Price:  £108.78
You save:  £31.08
CA$138.25
List Price:  CA$193.55
You save:  CA$55.30
A$152.72
List Price:  A$213.82
You save:  A$61.09
S$134.20
List Price:  S$187.89
You save:  S$53.68
HK$780.59
List Price:  HK$1,092.86
You save:  HK$312.27
CHF 88.44
List Price:  CHF 123.82
You save:  CHF 35.38
NOK kr1,100.24
List Price:  NOK kr1,540.39
You save:  NOK kr440.14
DKK kr687.33
List Price:  DKK kr962.29
You save:  DKK kr274.96
NZ$169.82
List Price:  NZ$237.75
You save:  NZ$67.93
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳11,743.81
List Price:  ৳16,441.81
You save:  ৳4,697.99
₹8,371.41
List Price:  ₹11,720.31
You save:  ₹3,348.90
RM465.70
List Price:  RM652
You save:  RM186.30
₦165,740.53
List Price:  ₦232,043.38
You save:  ₦66,302.84
₨27,788.10
List Price:  ₨38,904.46
You save:  ₨11,116.35
฿3,584.57
List Price:  ฿5,018.55
You save:  ฿1,433.97
₺3,297.92
List Price:  ₺4,617.23
You save:  ₺1,319.30
B$564.64
List Price:  B$790.52
You save:  B$225.88
R1,827.40
List Price:  R2,558.44
You save:  R731.03
Лв180.11
List Price:  Лв252.16
You save:  Лв72.05
₩138,473.15
List Price:  ₩193,867.95
You save:  ₩55,394.80
₪365.84
List Price:  ₪512.19
You save:  ₪146.35
₱5,845.41
List Price:  ₱8,183.81
You save:  ₱2,338.40
¥15,371.96
List Price:  ¥21,521.36
You save:  ¥6,149.40
MX$1,849.41
List Price:  MX$2,589.25
You save:  MX$739.84
QR364.19
List Price:  QR509.88
You save:  QR145.69
P1,352.81
List Price:  P1,894
You save:  P541.18
KSh12,979.15
List Price:  KSh18,171.33
You save:  KSh5,192.18
E£4,833.51
List Price:  E£6,767.11
You save:  E£1,933.60
ብር5,772.08
List Price:  ብር8,081.15
You save:  ብር2,309.06
Kz87,254.87
List Price:  Kz122,160.31
You save:  Kz34,905.44
CLP$94,724.52
List Price:  CLP$132,618.12
You save:  CLP$37,893.60
CN¥724.96
List Price:  CN¥1,014.98
You save:  CN¥290.01
RD$5,909.73
List Price:  RD$8,273.86
You save:  RD$2,364.12
DA13,421.76
List Price:  DA18,791
You save:  DA5,369.24
FJ$225.87
List Price:  FJ$316.23
You save:  FJ$90.35
Q774.58
List Price:  Q1,084.45
You save:  Q309.86
GY$20,907.04
List Price:  GY$29,270.70
You save:  GY$8,363.65
ISK kr13,804.61
List Price:  ISK kr19,327.01
You save:  ISK kr5,522.40
DH983.39
List Price:  DH1,376.78
You save:  DH393.39
L1,772.18
List Price:  L2,481.12
You save:  L708.94
ден5,666.48
List Price:  ден7,933.30
You save:  ден2,266.82
MOP$803.68
List Price:  MOP$1,125.19
You save:  MOP$321.50
N$1,822.62
List Price:  N$2,551.75
You save:  N$729.12
C$3,674.96
List Price:  C$5,145.09
You save:  C$1,470.13
रु13,374.15
List Price:  रु18,724.35
You save:  रु5,350.19
S/375.27
List Price:  S/525.40
You save:  S/150.12
K391.68
List Price:  K548.37
You save:  K156.68
SAR375.13
List Price:  SAR525.20
You save:  SAR150.06
ZK2,608.33
List Price:  ZK3,651.77
You save:  ZK1,043.43
L458.02
List Price:  L641.25
You save:  L183.22
Kč2,333.92
List Price:  Kč3,267.59
You save:  Kč933.66
Ft36,019.89
List Price:  Ft50,429.29
You save:  Ft14,409.40
SEK kr1,081.31
List Price:  SEK kr1,513.87
You save:  SEK kr432.56
ARS$92,801.80
List Price:  ARS$129,926.23
You save:  ARS$37,124.43
Bs690.67
List Price:  Bs966.96
You save:  Bs276.29
COP$403,758.19
List Price:  COP$565,277.62
You save:  COP$161,519.43
₡52,788.48
List Price:  ₡73,905.99
You save:  ₡21,117.50
L2,471.95
List Price:  L3,460.83
You save:  L988.88
₲756,054.93
List Price:  ₲1,058,507.15
You save:  ₲302,452.21
$U4,029.23
List Price:  $U5,641.08
You save:  $U1,611.85
zł393.63
List Price:  zł551.10
You save:  zł157.46
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.