List groups are a flexible UI component for displaying both simple and

complex lists of elements.

You can convert a simple HTML list into

something more visually interesting like this.

For instance, the unordered list of JavaScript topics looks a little plain and

uninteresting.

So check out how visually appealing it looks when converted to a linked

list group.

The list items are even clickable with hover styles too.

You can grab this exact snippet from the teacher's notes of this video.

So we're going to create a customized list group component

to build a conference schedule.

One of the best parts about using Bootstrap is that you can mix and

match classes to create components that match your design needs.

So scroll down to the schedule content, and

right below the schedule heading,

I'll replace this placeholder text with a ul.

I'll give it the class list-group.

Then inside it, add a list item with

the class list-group-item.

So the mock up shows that each time slot should display the name of the talk

in bold letters, the speaker's name below it, and the time on the right.

So we're going to wrap each schedule item inside a flex container.

This will make it easier to align the content.

So, inside the list group item, let's add a div

with the flex box utility class d-flex.

This will enable flex behaviors, and we'll add the class

justify-content-between to change the alignment of flex items.

So this will evenly distribute the content on one line.

The first element will be aligned to the left side of the div and

the last element to the right.

The first talk of the day will be the keynote.

So let's start with the name of the talk in bold letters.

Inside the div, I'll add an h5, and I'm going to apply

a 0.25 rim bottom margin with the class mb-1.

And let's add the text, so we'll say Keynote: Internet of Things.

Next, we'll add the talk time.

I know from reading the docs that you can add

badges inside the list group component.

In Bootstrap, badges are small labelling components for

adding context to your content.

I think badges are well suited for displaying the talk times, so

we'll use them in our schedule list group, specifically the pill-shaped badges.

So I'll copy this badge-pill snippet with the class

badge-info and paste it below the h5.

Now let's write the talk time, which is 9 AM.

And I'll apply 0.5 rims of padding to all four sides of

the badge with the spacing utility class p-2.

Remember, if you don't specify a side in the class name,

it applies the spacing to all sides.

All right, so in the browser, notice how the talk name is aligned to the left,

and the time is aligned to the right.

Now, to place the speaker name below the talk name,

I'll add a paragraph outside of the div

with the text NodeStradamus, the name of the keynote speaker.

And I'll reduce the default bottom margin of

the paragraph to just 0.25 rem with the class mb-1.

Now that the first talk's complete, adding the rest should be simple, so

let's add a few more.

Back in my list-group, I'll copy the list-group

item we've just created, paste a new item below.

And this talk is React Basics, At 10 AM.

And the speaker is Vivianne McVue.

I'll go back and add another one.

So I'll paste a new list item below.

The name of this talk is Hey, Mongo at 11 AM,

and the speaker is Jay Query.

Now every conference needs a lunch break, right?

Great conferences even offer free pizza.

So we'll add another list group item for lunch.

We'll write Lunch at 12 PM.

And inside the paragraph, I'll type, Free pizza for everyone!.

And to make the lunch break list-group item stand out, I can apply one of

these contextual classes to style the list-group item differently.

I'll give it a light green background with the class list-group-item-success.

I'll stop here, but you don't have to, so

feel free to add as many list-group items as you like.

You can also copy the rest of the conference schedule content from

the teacher's notes of this video.