1
00:00:00,480 --> 00:00:06,105
In this video, we'll build this basic
page footer using the base nav component.

2
00:00:06,105 --> 00:00:09,630
You'll also learn how simple it is to
add interactive components to your site

3
00:00:09,630 --> 00:00:13,960
like a drop down menu using
Bootstrap JavaScript plugins.

4
00:00:13,960 --> 00:00:18,652
First, I'll add comments for
the footer at the bottom of index.html

5
00:00:18,652 --> 00:00:21,686
right above the container's
closing div tag.

6
00:00:35,601 --> 00:00:37,026
Inside the comments,

7
00:00:37,026 --> 00:00:41,303
I'll paste a simple grid snippet
to get the footer layout started.

8
00:00:41,303 --> 00:00:44,472
And you can copy this code from
the teacher's notes of this video.

9
00:00:48,101 --> 00:00:53,710
The page footer is made up of
a row containing two columns.

10
00:00:53,710 --> 00:00:58,240
The first column spans seven
columns in medium devices and up,

11
00:00:58,240 --> 00:01:01,720
and the second column takes
up the remaining space.

12
00:01:01,720 --> 00:01:04,142
It contains the site's copyright text,

13
00:01:04,142 --> 00:01:08,650
which is aligned to the right edge of
the column and the medium break point and

14
00:01:08,650 --> 00:01:13,370
up with the text alignment
utility class text-md-right.

15
00:01:13,370 --> 00:01:16,720
So next, to create a simple footer nav,

16
00:01:16,720 --> 00:01:20,900
I'll add the base nav component
inside the first column.

17
00:01:20,900 --> 00:01:24,750
So I'm going to copy this first
unordered list snippet and

18
00:01:24,750 --> 00:01:26,960
paste it inside my first column.

19
00:01:34,999 --> 00:01:39,788
Now, I only need three nav
items in my footer navigation,

20
00:01:39,788 --> 00:01:42,623
so I'll delete the fourth item and

21
00:01:42,623 --> 00:01:46,780
also remove the active
class from the first link.

22
00:01:46,780 --> 00:01:50,000
Now, I'll change the first
nav-link to Community.

23
00:01:53,552 --> 00:01:55,553
And the second one to Tracks.

24
00:02:04,920 --> 00:02:09,551
The conference organizers want to include
a dropdown menu in the footer that lists

25
00:02:09,551 --> 00:02:11,912
some of the other conferences they host.

26
00:02:11,912 --> 00:02:15,769
Well, Bootstrap provides
interactive dropdown components for

27
00:02:15,769 --> 00:02:18,490
displaying list of links and more.

28
00:02:18,490 --> 00:02:21,870
Normally, you'd need to program this
kind of interactivity yourself.

29
00:02:21,870 --> 00:02:25,154
Fortunately, Bootstrap
supplies the JavaScript and

30
00:02:25,154 --> 00:02:29,120
all you need to use it is add
some HTML markup and CSS classes.

31
00:02:29,120 --> 00:02:34,480
So, you can turn a regular button into a single
dropdown menu with a few markup changes.

32
00:02:34,480 --> 00:02:38,470
And I like the style of
the split button dropdowns.

33
00:02:38,470 --> 00:02:43,890
It's basically a button group containing
the action button and a toggle button.

34
00:02:43,890 --> 00:02:47,520
So as you can see, the dropdown menus
are toggled by clicking not hovering.

35
00:02:48,760 --> 00:02:52,740
So I'll copy the split button,
snip it here.

36
00:02:52,740 --> 00:02:56,519
And paste it inside the third
list item in the footer nav,

37
00:02:56,519 --> 00:02:59,684
replacing the link that's
inside by default.

38
00:03:12,433 --> 00:03:16,255
The snippet I copied uses
the red button styles.

39
00:03:16,255 --> 00:03:22,266
I wanna display an outlined button,
so I'll change both button

40
00:03:22,266 --> 00:03:27,734
classes from btn-danger
to btn-outline-secondary.

41
00:03:40,184 --> 00:03:45,401
Then I'll change the button's text to say,
Other Confs,

42
00:03:48,393 --> 00:03:52,324
And now let's add the conference
names to the list of dropdown links.

43
00:03:54,684 --> 00:03:59,167
So the first one will be CSS Conf.

44
00:03:59,167 --> 00:04:02,818
Let's make the second link, Python Conf.

45
00:04:06,771 --> 00:04:14,191
Then Java Conf, And Swift Conf.

46
00:04:17,284 --> 00:04:22,058
Now, the dropdown-divider class here
adds a dividing line to the drop down

47
00:04:22,058 --> 00:04:22,963
navigation.

48
00:04:22,963 --> 00:04:25,137
We don't need it for our site,
so we can delete it.

49
00:04:29,865 --> 00:04:31,886
Let's have a look.

50
00:04:31,886 --> 00:04:36,331
Back in the browser,
the dropdown looks and works great.

51
00:04:36,331 --> 00:04:38,419
And it was pretty easy to implement.

52
00:04:38,419 --> 00:04:43,299
Now, the dropdown is at the very bottom
of the page and notice how the menu

53
00:04:43,299 --> 00:04:48,030
link expands above the footer, but
the arrow icon still points down.

54
00:04:48,030 --> 00:04:50,536
So, let's change it to point up.

55
00:04:50,536 --> 00:04:59,050
Giving the btn-grp a class dropup 
will reverse the arrow icon.

56
00:04:59,050 --> 00:05:01,210
So, now it's pointing up.

57
00:05:01,210 --> 00:05:05,110
And this also ensures that the drop
down menu always opens above the footer.

58
00:05:05,110 --> 00:05:08,160
And there you have it,
our footer is complete.