- Building a Navbar 9:17
- Using Jumbotron to Showcase Key Content 2:48
- Buttons and Button Groups 5:22
- Inline Navs and Dropdown Buttons 5:09
- Displaying Content with Cards 7:32
- Building the Schedule with a List Group 6:26
- Displaying a Modal Window 5:02
- Using ScrollSpy to Highlight Nav Links 4:22
- Bootstrap Components Review 6 questions
Preview
Video Player
00:00
00:00
Building the Schedule with a List Group
6:26List 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.
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 rem 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 rems 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