Learn
Learn Bootstrap 4: Utilities and Components
Creating a Navbar

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.

Folder Icon

Sign up to start coding

Already have an account?