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 rem 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 rems 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.