Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
List groups are flexible UI components for displaying both simple and complex lists of elements. You can convert a simple HTML list into something more visually interesting.
Topics snippet
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"><strong>MongoDB</strong>: NoSQL database</a>
<a href="#" class="list-group-item list-group-item-action"><strong>Express</strong>: Framework for Node</a>
<a href="#" class="list-group-item list-group-item-action"><strong>React</strong>: JavaScript library</a>
<a href="#" class="list-group-item list-group-item-action"><strong>Node.js</strong>: JavaScript environment</a>
<a href="#" class="list-group-item list-group-item-action"><strong>ES2015</strong>: Latest version of JavaScript</a>
<a href="#" class="list-group-item list-group-item-action"><strong>Babel</strong>: JavaScript compiler</a>
</div>
Schedule snippet
<!-- schedule -->
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Keynote: Internet of Things</h5>
<span class="badge badge-pill badge-info p-2">9:00am</span>
</div>
<p class="mb-1">NodeStradamus</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">React Basics</h5>
<span class="badge badge-pill badge-info p-2">10:00am</span>
</div>
<p class="mb-1">Vivianne McVue</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Hey, Mongo!</h5>
<span class="badge badge-pill badge-info p-2">11:00am</span>
</div>
<p class="mb-1">Jay Query</p>
</li>
<li class="list-group-item list-group-item-success">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Lunch</h5>
<span class="badge badge-pill badge-info p-2">12:00pm</span>
</div>
<p class="mb-1">Free pizza for everyone!</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Introducing ES2015</h5>
<span class="badge badge-pill badge-info p-2">1:00pm</span>
</div>
<p class="mb-1">Ecma Scriptnstuff</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">Getting Started With Redux</h5>
<span class="badge badge-pill badge-info p-2">2:00pm</span>
</div>
<p class="mb-1">Robbie Redux</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5 class="mb-1">What's Babel?</h5>
<span class="badge badge-pill badge-info p-2">3:00pm</span>
</div>
<p class="mb-1">Json Babel</p>
</li>
</ul><!-- /schedule -->
Resources
List groups are a flexible UI component for displaying both simple and 0:00 complex lists of elements. 0:04 You can convert a simple HTML list into 0:06 something more visually interesting like this. 0:09 For instance, the unordered list of JavaScript topics looks a little plain and 0:12 uninteresting. 0:16 So check out how visually appealing it looks when converted to a linked 0:17 list group. 0:22 The list items are even clickable with hover styles too. 0:25 You can grab this exact snippet from the teacher's notes of this video. 0:29 So we're going to create a customized list group component 0:33 to build a conference schedule. 0:36 One of the best parts about using Bootstrap is that you can mix and 0:38 match classes to create components that match your design needs. 0:41 So scroll down to the schedule content, and 0:45 right below the schedule heading, 0:49 I'll replace this placeholder text with a ul. 0:53 I'll give it the class list-group. 1:00 Then inside it, add a list item with 1:05 the class list-group-item. 1:11 So the mock up shows that each time slot should display the name of the talk 1:19 in bold letters, the speaker's name below it, and the time on the right. 1:25 So we're going to wrap each schedule item inside a flex container. 1:31 This will make it easier to align the content. 1:35 So, inside the list group item, let's add a div 1:38 with the flex box utility class d-flex. 1:44 This will enable flex behaviors, and we'll add the class 1:49 justify-content-between to change the alignment of flex items. 1:54 So this will evenly distribute the content on one line. 1:59 The first element will be aligned to the left side of the div and 2:04 the last element to the right. 2:08 The first talk of the day will be the keynote. 2:11 So let's start with the name of the talk in bold letters. 2:13 Inside the div, I'll add an h5, and I'm going to apply 2:17 a 0.25 rim bottom margin with the class mb-1. 2:23 And let's add the text, so we'll say Keynote: Internet of Things. 2:28 Next, we'll add the talk time. 2:37 I know from reading the docs that you can add 2:40 badges inside the list group component. 2:43 In Bootstrap, badges are small labelling components for 2:46 adding context to your content. 2:50 I think badges are well suited for displaying the talk times, so 2:52 we'll use them in our schedule list group, specifically the pill-shaped badges. 2:55 So I'll copy this badge-pill snippet with the class 3:01 badge-info and paste it below the h5. 3:06 Now let's write the talk time, which is 9 AM. 3:13 And I'll apply 0.5 rims of padding to all four sides of 3:21 the badge with the spacing utility class p-2. 3:26 Remember, if you don't specify a side in the class name, 3:30 it applies the spacing to all sides. 3:33 All right, so in the browser, notice how the talk name is aligned to the left, 3:40 and the time is aligned to the right. 3:45 Now, to place the speaker name below the talk name, 3:48 I'll add a paragraph outside of the div 3:52 with the text NodeStradamus, the name of the keynote speaker. 3:57 And I'll reduce the default bottom margin of 4:02 the paragraph to just 0.25 rem with the class mb-1. 4:06 Now that the first talk's complete, adding the rest should be simple, so 4:17 let's add a few more. 4:20 Back in my list-group, I'll copy the list-group 4:22 item we've just created, paste a new item below. 4:27 And this talk is React Basics, At 10 AM. 4:33 And the speaker is Vivianne McVue. 4:44 I'll go back and add another one. 4:56 So I'll paste a new list item below. 4:59 The name of this talk is Hey, Mongo at 11 AM, 5:03 and the speaker is Jay Query. 5:11 Now every conference needs a lunch break, right? 5:17 Great conferences even offer free pizza. 5:20 So we'll add another list group item for lunch. 5:23 We'll write Lunch at 12 PM. 5:30 And inside the paragraph, I'll type, Free pizza for everyone!. 5:36 And to make the lunch break list-group item stand out, I can apply one of 5:49 these contextual classes to style the list-group item differently. 5:54 I'll give it a light green background with the class list-group-item-success. 6:00 I'll stop here, but you don't have to, so 6:14 feel free to add as many list-group items as you like. 6:17 You can also copy the rest of the conference schedule content from 6:21 the teacher's notes of this video. 6:24
You need to sign up for Treehouse in order to download course files.
Sign up