List Groups

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 cover list groups. Lists groups are really cool components for displaying and organizing lists of components, data and elements. And they also provide custom content and really cool styling it all routed nicely together. So in this video is going to show you some basic example of this and further videos we'll expand on what we do in here. So to create a list group, you do a on ordered list. And the unordered list has a class of think you might have guessed it, list group, so it's a list dash group.

Inside here, you simply put all the list items that you want the list item as a class of list, dash group, dash item, then inside here, you put what you Once I want to come up to 31 and copy and paste, and 234, save it, go back to a browser refresh. There we go, we have a list of items. But you can also easily add labels to your items. So it helps you display sort of like the activity that's going on for that particular property. That item also, like if you if it's some sort of notifications system, how many unread notifications you have or how many unread emails, new emails, that sort of stuff. So what we're going to do is copy and paste it so you can see the difference between it with and with our label.

So what you need to do keep it as it is probably best if we put it on separate lines. We need more code installing the list item. This as it is to not get too We just add more code to it. So at the start, just put a span. And this span has a class of label and label dash fo. And for this do label dash pills, I'm going to do a pill label and call dash Riker.

I want to position on the right hand side. We don't have to do any CSS to make it float all the way to the right. bootstrap handles all that for you using classes. I'm just gonna put a number here 56 for example. And I'm also just going to copy and paste this. Do the same again and then find a do the same Just change these numbers up a bit, the Euro 23 and not refresh.

Oh yeah, save. And there we go, we actually you know what I'm going to do, I'm going to add a new line simply because it didn't look very good. So we have our regular list group, then we have a list group with labels. And it easily shows us our, let's say, on red cam notifications, that sort of stuff. So if I just resize this browser, as it says, always anchored on the right, and it adjusts very nicely as we adjust the browser. So this on a mobile device will look quite cool.

And then on a desktop device, it works very well as well. So if you have any questions about this, feel free to post them on our education platform sonar learning Dakota UK for slash question. PHP, there'll be a link in the description to that. Plus, there'll be another link in the description to the source code from this video. Please rate, comment and subscribe as it really does help us provide more content and grow. Plus, he also lets us know what you like and what you don't like about the video.

So future videos can be better and that's good for everyone. And as usual, thanks for watching, and I hope you 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.