4.4 List Groups

Hey. Welcome back. A new component in version three is the list group. And these are very flexible and can be used for displaying simple lists of elements, as well as more complex lists with some custom content. So the way you start is actually very simple. You start with an ul, with a class of list-group and then inside you would have list items with a class of list-group-item that have some content. And in my case, I'm just gonna say, some content goes here. And let's do a couple of list items. Like four, save and there it is. This is a list group. You can combine this element with some additional typography elements like badges, for example. So if you have like a list group in a sidebar and you wanna show a number on the right of each element, you can do so by adding a span with a class of badge. [BLANK_AUDIO] And there it is. Now we have a badge on each one. Now if you want these items to link to somewhere, you can do an alternative. So, you can have a div with a class of list-group instead of instead of a new ul, and then each list item will be transformed into an anchor tag. So I would say anchor tag with a class of list-group-item. Let's do times four. Refresh. And now you have linked items. If you wanna set a particular one as selected, you can add the class of active. [BLANK_AUDIO] So now the first item is active. Now, I'm just gonna copy this list group because I wanna show you some contextual classes. So we have the div class list-group, and then on each list item, I'm gonna add this list-group-item-success for one. I'm gonna copy it and paste it on the other ones. And I'm gonna change the class names to info warning and danger. Now if you refresh, notice you have different colors. And this also works for DUL version, except they won't be linked anymore. If I take out the active class. [BLANK_AUDIO] This is how it looks like. And finally, you can add custom content to these list groups. So let's create another one, HR. And I'm gonna do the div version where I link items. So div with a class of list group, and then each list group item is gonna be an anchor tag. So list-group-item. And then inside I can have for example a heading, which has a class of list-group-item-heading and it doesn't matter which heading you use. Either it's h1. Either it's h6 as long as it has this class. Okay, this is a heading. And then, for content, you can have a paragraph with a class of list-group-item-text. This is the content. Save. Refresh. And there it is. If you copy and paste this a couple of times. This is how it looks like. And of course, you can add a class of active to one of 'em. So that's a list group in a nutshell. Now another recently added component is represented by panels. That's coming up.