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