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

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

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">

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"

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

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

Or sign up using:

Already have an account?