1
00:00:01,240 --> 00:00:08,140
Hello, in this video, we are going to cover list groups, so a list group is just a really cool way

2
00:00:08,320 --> 00:00:11,070
of organizing data to give up.

3
00:00:11,380 --> 00:00:23,650
So to implement in this group, you put on the list, there's a class of list and then here you have

4
00:00:23,650 --> 00:00:25,150
list items

5
00:00:27,910 --> 00:00:34,840
and they either require a class list, dash group, dash item.

6
00:00:34,990 --> 00:00:42,220
And then you put what Texte going to put out some of my favorite superheroes up for a total of five.

7
00:00:42,220 --> 00:00:46,600
You can put as many as you want and go down

8
00:00:51,670 --> 00:00:57,190
and a guy walk and Green Lantern.

9
00:01:04,070 --> 00:01:06,230
So let's say that refresh.

10
00:01:06,560 --> 00:01:08,690
There you go, that's it, that's literally.

11
00:01:10,400 --> 00:01:18,770
All there is to it, and this is responsive as well, and obviously he spends a full 12, Callon, because

12
00:01:18,770 --> 00:01:23,510
he's in a coma, 12 people in what it calls, for example, Bishoff.

13
00:01:27,120 --> 00:01:30,810
Look, the way the big speech on.

14
00:01:31,850 --> 00:01:35,980
On the Samsung phone that for some reason that got triggered, that when I said something that cold

15
00:01:35,990 --> 00:01:40,890
12, OK, and if I get that, basically what it is.

16
00:01:41,240 --> 00:01:48,770
So then, you know, a bunch of other different features and no one will implement one more of these

17
00:01:48,890 --> 00:01:49,820
four companies.

18
00:01:51,140 --> 00:01:55,190
You can make some of them active and some of them disabled.

19
00:01:55,440 --> 00:01:59,630
So let's say if I was to make this one active, pretty effective.

20
00:02:00,160 --> 00:02:08,270
If me the last one to say you just put the class, disable, reload, that is active now, it just means

21
00:02:08,540 --> 00:02:09,350
that it's active.

22
00:02:09,590 --> 00:02:12,950
It doesn't actually have any backend functionality.

23
00:02:12,950 --> 00:02:16,460
You can implement that yourself, that back in code, which is not.

24
00:02:17,500 --> 00:02:22,340
Directly linked to bootstrappers shows you the visual elements, but this is cool.

25
00:02:22,380 --> 00:02:25,710
Imagine if these were clickable and the last foetid.

26
00:02:25,710 --> 00:02:31,740
I'm going to show you how to make a clickable in terms of an I hate Reath, then maybe you could select

27
00:02:31,740 --> 00:02:32,580
one with more.

28
00:02:32,580 --> 00:02:33,660
And this is disabled.

29
00:02:34,290 --> 00:02:39,030
OK, so if we want to copy the original one.

30
00:02:44,450 --> 00:02:52,490
So if I want to pour a make one of them a link or multiple links, you just do this for the know the

31
00:02:52,490 --> 00:02:53,280
other as well.

32
00:02:53,370 --> 00:03:02,090
So what you do with changes from a list item to a page and want perhaps just say don't go anywhere,

33
00:03:02,210 --> 00:03:06,350
but make it go to a separate page on your website or a separate website entirely.

34
00:03:06,710 --> 00:03:19,970
One last cluster you need list dash group dash item action and turn this to an anchor tag reload.

35
00:03:20,330 --> 00:03:25,280
And as you can see, that is some sort of active, horrible state.

36
00:03:25,610 --> 00:03:30,440
And obviously we can click it doesn't do anything at the moment, but you can make it do whatever you

37
00:03:30,440 --> 00:03:30,880
want.

38
00:03:30,890 --> 00:03:34,690
If you don't have this in here, this is what it looks like.

39
00:03:34,730 --> 00:03:40,760
You may want it like this person sort of tilting the reload.

40
00:03:41,000 --> 00:03:51,890
It looks like a general link, whereas with this it removes the native link Starlin and implements boot

41
00:03:51,890 --> 00:03:53,360
straps on Stardate.

42
00:03:53,930 --> 00:03:59,450
So that's that's really for list group says more things that you can do like.

43
00:04:00,720 --> 00:04:01,470
You can flush.

44
00:04:01,590 --> 00:04:03,400
You can do horizontal layout.

45
00:04:03,690 --> 00:04:10,950
You can have contextual classes, which is to simply Colerain, these classes here, the same sort of

46
00:04:10,950 --> 00:04:16,920
system, your primary secondary success, danger warning, light dot, which were, you know, familiar

47
00:04:16,920 --> 00:04:17,310
with.

48
00:04:17,460 --> 00:04:22,680
And you can have badges in the works with your covering badges as well.

49
00:04:22,760 --> 00:04:24,110
Feel free to check that out.

50
00:04:25,350 --> 00:04:28,470
The JavaScript functionality, the fadin.

51
00:04:28,740 --> 00:04:36,800
And there's a way to detect when events have been triggered on it and by pure vanilla JavaScript.

52
00:04:36,870 --> 00:04:38,150
So feel free to check this out.

53
00:04:38,160 --> 00:04:40,230
I will provide a link to this in the description.

54
00:04:40,720 --> 00:04:45,110
And as usual, if you have any questions, feel free to me your message and I'll look forward to seeing

55
00:04:45,120 --> 00:04:47,150
you in the next awesome bootstrap video.