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.