- 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
Inline Navs and Dropdown Buttons
5:09In this video, we'll build a basic page footer using the nav and dropdown button components. You'll learn how simple it is to add interactive components to your site using JavaScript plugins.
In this video, we'll build this basic
page footer using the base nav component.
0:00
You'll also learn how simple it is to
add interactive components to your site
0:06
like a drop down menu using
Bootstrap JavaScript plugins.
0:09
First, I'll add comments for
the footer at the bottom of index.html
0:13
right above the container's
closing div tag.
0:18
Inside the comments,
0:35
I'll paste a simple grid snippet
to get the footer layout started.
0:37
And you can copy this code from
the teacher's notes of this video.
0:41
The page footer is made up of
a row containing two columns.
0:48
The first column spans seven
columns in medium devices and up,
0:53
and the second column takes
up the remaining space.
0:58
It contains the site's copyright text,
1:01
which is aligned to the right edge of
the column and the medium break point and
1:04
up with the text alignment
utility class text-md-right.
1:08
So next, to create a simple footer nav,
1:13
I'll add the base nav component
inside the first column.
1:16
So I'm going to copy this first
unordered list snippet and
1:20
paste it inside my first column.
1:24
Now, I only need three nav
items in my footer navigation,
1:34
so I'll delete the fourth item and
1:39
also remove the active
class from the first link.
1:42
Now, I'll change the first
nav-link to Community.
1:46
And the second one to Tracks.
1:53
The conference organizers want to include
a dropdown menu in the footer that lists
2:04
some of the other conferences they host.
2:09
Well, Bootstrap provides
interactive dropdown components for
2:11
displaying list of links and more.
2:15
Normally, you'd need to program this
kind of interactivity yourself.
2:18
Fortunately, Bootstrap
supplies the JavaScript and
2:21
all you need to use it is add
some HTML markup and CSS classes.
2:25
So, you can turn a regular button into a single
dropdown menu with a few markup changes.
2:29
And I like the style of
the split button dropdowns.
2:34
It's basically a button group containing
the action button and a toggle button.
2:38
So as you can see, the dropdown menus
are toggled by clicking not hovering.
2:43
So I'll copy the split button,
snip it here.
2:48
And paste it inside the third
list item in the footer nav,
2:52
replacing the link that's
inside by default.
2:56
The snippet I copied uses
the red button styles.
3:12
I wanna display an outlined button,
so I'll change both button
3:16
classes from btn-danger
to btn-outline-secondary.
3:22
Then I'll change the button's text to say,
Other Confs,
3:40
And now let's add the conference
names to the list of dropdown links.
3:48
So the first one will be CSS Conf.
3:54
Let's make the second link, Python Conf.
3:59
Then Java Conf, And Swift Conf.
4:06
Now, the dropdown-divider class here
adds a dividing line to the drop down
4:17
navigation.
4:22
We don't need it for our site,
so we can delete it.
4:22
Let's have a look.
4:29
Back in the browser,
the dropdown looks and works great.
4:31
And it was pretty easy to implement.
4:36
Now, the dropdown is at the very bottom
of the page and notice how the menu
4:38
link expands above the footer, but
the arrow icon still points down.
4:43
So, let's change it to point up.
4:48
Giving the btn-grp a class dropup
will reverse the arrow icon.
4:50
So, now it's pointing up.
4:59
And this also ensures that the drop
down menu always opens above the footer.
5:01
And there you have it,
our footer is complete.
5:05