Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Inline Navs and Dropdown Buttons

5:09 with Guil Hernandez

In 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.

Code snippets

<!-- footer -->
<div class="row py-3">
  <div class="col-md-7"> </div>
  <div class="col-md text-md-right">
    <small>&copy; 2017 Full Stack Conf &amp; Treehouse</small>
  </div>
</div><!-- /footer -->

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up