1
00:00:00,500 --> 00:00:04,296
List groups are a flexible UI component
for displaying both simple and

2
00:00:04,296 --> 00:00:06,180
complex lists of elements.

3
00:00:06,180 --> 00:00:09,050
You can convert a simple HTML list into

4
00:00:09,050 --> 00:00:12,110
something more visually
interesting like this.

5
00:00:12,110 --> 00:00:16,530
For instance, the unordered list of
JavaScript topics looks a little plain and

6
00:00:16,530 --> 00:00:17,690
uninteresting.

7
00:00:17,690 --> 00:00:22,450
So check out how visually appealing
it looks when converted to a linked

8
00:00:22,450 --> 00:00:23,090
list group.

9
00:00:25,410 --> 00:00:29,170
The list items are even
clickable with hover styles too.

10
00:00:29,170 --> 00:00:33,420
You can grab this exact snippet from
the teacher's notes of this video.

11
00:00:33,420 --> 00:00:36,890
So we're going to create
a customized list group component

12
00:00:36,890 --> 00:00:38,930
to build a conference schedule.

13
00:00:38,930 --> 00:00:41,939
One of the best parts about using
Bootstrap is that you can mix and

14
00:00:41,939 --> 00:00:45,075
match classes to create components
that match your design needs.

15
00:00:45,075 --> 00:00:49,525
So scroll down to the schedule content,
and

16
00:00:49,525 --> 00:00:53,135
right below the schedule heading,

17
00:00:53,135 --> 00:00:57,960
I'll replace this
placeholder text with a ul.

18
00:01:00,440 --> 00:01:05,710
I'll give it the class list-group.

19
00:01:05,710 --> 00:01:11,034
Then inside it, add a list item with

20
00:01:11,034 --> 00:01:15,828
the class list-group-item.

21
00:01:19,767 --> 00:01:25,074
So the mock up shows that each time
slot should display the name of the talk

22
00:01:25,074 --> 00:01:31,120
in bold letters, the speaker's name
below it, and the time on the right.

23
00:01:31,120 --> 00:01:35,750
So we're going to wrap each schedule
item inside a flex container.

24
00:01:35,750 --> 00:01:38,320
This will make it easier
to align the content.

25
00:01:38,320 --> 00:01:43,460
So, inside the list group item,
let's add a div

26
00:01:44,590 --> 00:01:49,530
with the flex box utility class d-flex.

27
00:01:49,530 --> 00:01:54,144
This will enable flex behaviors,
and we'll add the class

28
00:01:54,144 --> 00:01:59,616
justify-content-between to change
the alignment of flex items.

29
00:01:59,616 --> 00:02:04,449
So this will evenly distribute
the content on one line.

30
00:02:04,449 --> 00:02:08,229
The first element will be aligned
to the left side of the div and

31
00:02:08,229 --> 00:02:10,130
the last element to the right.

32
00:02:11,800 --> 00:02:13,545
The first talk of the day
will be the keynote.

33
00:02:13,545 --> 00:02:17,870
So let's start with the name
of the talk in bold letters.

34
00:02:17,870 --> 00:02:23,343
Inside the div, I'll add an h5,
and I'm going to apply

35
00:02:23,343 --> 00:02:28,376
a 0.25 rim bottom margin
with the class mb-1.

36
00:02:28,376 --> 00:02:35,620
And let's add the text, so
we'll say Keynote: Internet of Things.

37
00:02:37,840 --> 00:02:40,390
Next, we'll add the talk time.

38
00:02:40,390 --> 00:02:43,750
I know from reading
the docs that you can add

39
00:02:43,750 --> 00:02:46,970
badges inside the list group component.

40
00:02:46,970 --> 00:02:50,280
In Bootstrap,
badges are small labelling components for

41
00:02:50,280 --> 00:02:52,600
adding context to your content.

42
00:02:52,600 --> 00:02:55,870
I think badges are well suited for
displaying the talk times, so

43
00:02:55,870 --> 00:03:01,430
we'll use them in our schedule list group,
specifically the pill-shaped badges.

44
00:03:01,430 --> 00:03:06,246
So I'll copy this badge-pill
snippet with the class

45
00:03:06,246 --> 00:03:09,894
badge-info and paste it below the h5.

46
00:03:13,960 --> 00:03:17,924
Now let's write the talk time,
which is 9 AM.

47
00:03:21,728 --> 00:03:26,463
And I'll apply 0.5 rims of
padding to all four sides of

48
00:03:26,463 --> 00:03:30,530
the badge with the spacing
utility class p-2.

49
00:03:30,530 --> 00:03:33,212
Remember, if you don't specify
a side in the class name,

50
00:03:33,212 --> 00:03:34,925
it applies the spacing to all sides.

51
00:03:40,454 --> 00:03:45,279
All right, so in the browser, notice how
the talk name is aligned to the left,

52
00:03:45,279 --> 00:03:47,560
and the time is aligned to the right.

53
00:03:48,620 --> 00:03:52,830
Now, to place the speaker
name below the talk name,

54
00:03:52,830 --> 00:03:55,960
I'll add a paragraph outside of the div

55
00:03:57,720 --> 00:04:02,700
with the text NodeStradamus,
the name of the keynote speaker.

56
00:04:02,700 --> 00:04:06,696
And I'll reduce the default
bottom margin of

57
00:04:06,696 --> 00:04:11,861
the paragraph to just 0.25
rem with the class mb-1.

58
00:04:17,004 --> 00:04:20,689
Now that the first talk's complete,
adding the rest should be simple, so

59
00:04:20,689 --> 00:04:22,510
let's add a few more.

60
00:04:22,510 --> 00:04:27,627
Back in my list-group,
I'll copy the list-group

61
00:04:27,627 --> 00:04:32,640
item we've just created,
paste a new item below.

62
00:04:33,940 --> 00:04:41,270
And this talk is React Basics, At 10 AM.

63
00:04:44,449 --> 00:04:47,274
And the speaker is Vivianne McVue.

64
00:04:56,643 --> 00:04:59,650
I'll go back and add another one.

65
00:04:59,650 --> 00:05:01,392
So I'll paste a new list item below.

66
00:05:03,929 --> 00:05:11,339
The name of this talk is Hey,
Mongo at 11 AM,

67
00:05:11,339 --> 00:05:16,100
and the speaker is Jay Query.

68
00:05:17,810 --> 00:05:20,720
Now every conference needs a lunch break,
right?

69
00:05:20,720 --> 00:05:23,230
Great conferences even offer free pizza.

70
00:05:23,230 --> 00:05:28,002
So we'll add another list group item for
lunch.

71
00:05:30,902 --> 00:05:33,461
We'll write Lunch at 12 PM.

72
00:05:36,785 --> 00:05:42,137
And inside the paragraph,
I'll type, Free pizza for everyone!.

73
00:05:49,843 --> 00:05:54,906
And to make the lunch break list-group
item stand out, I can apply one of

74
00:05:54,906 --> 00:05:59,890
these contextual classes to style
the list-group item differently.

75
00:06:00,910 --> 00:06:08,039
I'll give it a light green background
with the class list-group-item-success.

76
00:06:14,956 --> 00:06:17,547
I'll stop here, but you don't have to, so

77
00:06:17,547 --> 00:06:21,260
feel free to add as many
list-group items as you like.

78
00:06:21,260 --> 00:06:24,130
You can also copy the rest of
the conference schedule content from

79
00:06:24,130 --> 00:06:25,410
the teacher's notes of this video.