Learn

Let’s combine our knowledge of collapse, buttons, and the nav component to make a responsive navbar! We often find navbars at the top of websites and we can use a navbar to quickly navigate to useful/important pages on the website.

Below is an example from Bootstrap’s Navbar documentation that we’ve modified:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand Goes Here</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Current Page Link <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Another Page Link</a> </li> </ul> </div> </nav>

There’s a lot going on, so let’s break it down before we use it in our own code:

  • We have a <nav> element with multiple classes:
    • "navbar" makes this <nav> a Bootstrap navbar.
    • "navbar-expand-lg" renders the <div class="collapse navbar-collapse"> element on large (and extra large screens). The "lg" portion is called a breakpoint and refers to screen size widths. We can append one of any breakpoint value at the end, i.e. "sm", "md", "lg", or "xl".
    • "navbar-light" assigns a color scheme to the navbar.
    • "bg-light" assigns a background color to the navbar.
  • Inside the <nav> is an <a> with a class of "navbar-brand" which can be an image or text that represents the brand/logo of the website.
  • There is a <button> that renders when a user’s screen size is smaller than the breakpoint value in "navbar-expand-{breakpoint}" and toggles the visibility of the navbar menu to save space.
    • If the user’s screen size matches the breakpoint (or is bigger), then the <div>, with the nav component and its links, renders instead of the button.
  • The <ul> and the nested <li> make up a nav component.
  • The first <li> has a class of "active" which highlights the user’s current page.

Instructions

1.

We have some HTML in place for a navbar but we have to add some classes to make it a responsive Bootstrap navbar component.

Use the comments to locate the navbar component. The <nav> already has two classes for styling. You will have to add two more classes: "navbar" and "navbar-expand-sm".

2.

Under the opening <nav> tag, add an <a> element with a class of "navbar-brand".

Then copy and paste the following <img> to nest inside the <a> element:

<img src="https://content.codecademy.com/courses/learn-bootstrap-components/logo.png" alt="Gloria's Gardening Logo" height="30">
3.

The <button> and the collapsible <div> is already included, but we still need to make the <ul> and accompanying <li> and <a> elements into a nav component.

  • Assign the <ul> a class of "navbar-nav"
  • Assign all the <li> elements a class of "nav-item"
  • Assign all the <a> elements a class of "nav-link"
4.

Time to highlight the current page using the "active" class.

Add the "active" class to the first <li> element.

Notice after you add the change and run your code that the "Home" text has a subtle styling difference compared to the other two links in the navbar.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?