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
€88
List Price:  €123.21
You save:  €35.20
£74.84
List Price:  £104.79
You save:  £29.94
CA$138.32
List Price:  CA$193.65
You save:  CA$55.33
A$156.38
List Price:  A$218.94
You save:  A$62.56
S$130.62
List Price:  S$182.87
You save:  S$52.25
HK$775.55
List Price:  HK$1,085.80
You save:  HK$310.25
CHF 82.50
List Price:  CHF 115.51
You save:  CHF 33
NOK kr1,036.63
List Price:  NOK kr1,451.32
You save:  NOK kr414.69
DKK kr656.96
List Price:  DKK kr919.77
You save:  DKK kr262.81
NZ$168.89
List Price:  NZ$236.45
You save:  NZ$67.56
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.91
৳12,151.96
List Price:  ৳17,013.23
You save:  ৳4,861.27
₹8,449.35
List Price:  ₹11,829.43
You save:  ₹3,380.08
RM431.54
List Price:  RM604.18
You save:  RM172.63
₦160,289.96
List Price:  ₦224,412.36
You save:  ₦64,122.40
₨28,107.18
List Price:  ₨39,351.18
You save:  ₨11,244
฿3,340.66
List Price:  ฿4,677.06
You save:  ฿1,336.40
₺3,849.38
List Price:  ₺5,389.28
You save:  ₺1,539.90
B$563.23
List Price:  B$788.54
You save:  B$225.31
R1,861.29
List Price:  R2,605.88
You save:  R744.59
Лв172.14
List Price:  Лв241
You save:  Лв68.86
₩142,165.41
List Price:  ₩199,037.27
You save:  ₩56,871.85
₪363.27
List Price:  ₪508.60
You save:  ₪145.32
₱5,583.14
List Price:  ₱7,816.62
You save:  ₱2,233.47
¥14,305.53
List Price:  ¥20,028.32
You save:  ¥5,722.78
MX$1,953.74
List Price:  MX$2,735.31
You save:  MX$781.57
QR364.06
List Price:  QR509.70
You save:  QR145.64
P1,364.86
List Price:  P1,910.86
You save:  P546
KSh12,923.70
List Price:  KSh18,093.70
You save:  KSh5,170
E£5,078.88
List Price:  E£7,110.63
You save:  E£2,031.75
ብር13,183.68
List Price:  ብር18,457.68
You save:  ብር5,274
Kz91,190.88
List Price:  Kz127,670.88
You save:  Kz36,480
CLP$94,484.55
List Price:  CLP$132,282.15
You save:  CLP$37,797.60
CN¥729.42
List Price:  CN¥1,021.22
You save:  CN¥291.80
RD$5,867.26
List Price:  RD$8,214.40
You save:  RD$2,347.14
DA13,255.22
List Price:  DA18,557.84
You save:  DA5,302.61
FJ$226.17
List Price:  FJ$316.65
You save:  FJ$90.48
Q770.30
List Price:  Q1,078.46
You save:  Q308.15
GY$20,924.33
List Price:  GY$29,294.90
You save:  GY$8,370.57
ISK kr12,840.71
List Price:  ISK kr17,977.51
You save:  ISK kr5,136.80
DH923.18
List Price:  DH1,292.49
You save:  DH369.30
L1,716.42
List Price:  L2,403.06
You save:  L686.64
ден5,413.41
List Price:  ден7,578.99
You save:  ден2,165.58
MOP$799.04
List Price:  MOP$1,118.70
You save:  MOP$319.65
N$1,858.91
List Price:  N$2,602.55
You save:  N$743.64
C$3,680.60
List Price:  C$5,152.99
You save:  C$1,472.38
रु13,538.83
List Price:  रु18,954.90
You save:  रु5,416.07
S/366.61
List Price:  S/513.27
You save:  S/146.66
K412.26
List Price:  K577.18
You save:  K164.92
SAR375.05
List Price:  SAR525.08
You save:  SAR150.03
ZK2,792.94
List Price:  ZK3,910.24
You save:  ZK1,117.29
L438.09
List Price:  L613.35
You save:  L175.25
Kč2,191.98
List Price:  Kč3,068.86
You save:  Kč876.88
Ft35,590.39
List Price:  Ft49,827.97
You save:  Ft14,237.58
SEK kr964.31
List Price:  SEK kr1,350.07
You save:  SEK kr385.76
ARS$116,481.80
List Price:  ARS$163,079.18
You save:  ARS$46,597.38
Bs689.46
List Price:  Bs965.27
You save:  Bs275.81
COP$422,158.36
List Price:  COP$591,038.59
You save:  COP$168,880.23
₡50,569.76
List Price:  ₡70,799.68
You save:  ₡20,229.92
L2,581.10
List Price:  L3,613.65
You save:  L1,032.54
₲797,249.52
List Price:  ₲1,116,181.22
You save:  ₲318,931.70
$U4,209.82
List Price:  $U5,893.92
You save:  $U1,684.09
zł375.77
List Price:  zł526.10
You save:  zł150.32
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.