LESSON 10.6

Bootstrap Navigation

Add a responsive hamburger menu with Bootstrap

Install Bootstrap navigation on your website and get a hamburger menu that works on phones automatically.

💡 The Concept

Bootstrap’s navigation component gives you a responsive hamburger menu with just a few lines of code. On a desktop, the links display horizontally across the top. On a phone, they collapse into a hamburger icon that expands when tapped. You get all of this without writing a single line of JavaScript yourself.

Phone sized screenshot showing the bootstrap hamburger menu.

To make it work, you need three things added to your page: the Bootstrap CSS stylesheet in the <head>, the Bootstrap navbar HTML replacing your existing <nav>, and one JavaScript bundle file just before the closing </body> tag.

Exercise: Try It Yourself

Note: If you completed the earlier lessons in this module, you already added the Bootstrap stylesheet to your site in Lesson 10.3. If you took CSCI1450, you may have done this in Lab 11. Either way, Steps 1 and 2 may already be done — review them to confirm your links are Bootstrap 5, then continue with Step 3 to add the navbar.

Step 1. Add the Bootstrap Stylesheet to the Head

In your <head> section, add the Bootstrap CDN link. Place it above your own stylesheet so your custom CSS can override Bootstrap’s defaults:

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<!-- Your stylesheet below Bootstrap -->
<link rel="stylesheet" href="style.css">

Step 2. Add the JavaScript File

Bootstrap 5 only needs one JavaScript file — the bundle already includes everything it needs. Add it between your closing </footer> tag and the closing </body> tag:

<!-- Bootstrap JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 4 note: If you used Bootstrap 4 before, you had three separate files (jQuery, Popper, and Bootstrap JS). Bootstrap 5 dropped jQuery entirely — you only need this one file.

Step 3. Choose Your Layout and Replace Your Navigation

Bootstrap gives you two common navigation layouts. Pick the one that fits your design. In your template, the <header> and <nav> are two separate sections. You will replace both — select everything from the opening <header> tag all the way through the closing </nav> tag, and replace it all with the code below.

You may not have put your <nav> inside your <header> before, but that is actually the standard pattern for site navigation. The <header> marks the top section of the page, and the <nav> lives inside it. Both options below follow this structure.

Option 1: Logo Left, Links Right

Bootstrap nav shown at right with the logo at the left on a white background.

This is the most common layout for portfolio sites. Your site logo or name appears on the left, and the navigation links push to the right. The ms-auto class (margin-start: auto) is what pushes the links rightward.

<header>
  <nav class="navbar navbar-expand-sm navbar-light bg-white">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html"><img src="your-logo.png" alt="Your Logo" class="logo" height="100" width="300"></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLogoLeft" aria-controls="navbarLogoLeft" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarLogoLeft">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
          <li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Update your-logo.png with your actual logo filename, adjust the height and width to match your logo’s dimensions, and replace Your Logo in the alt attribute with a short description of your logo.

Option 2: Centered Navigation

Bootstrap nav shown centered with a logo above it using bg-dark.
Centered nav with the bg-dark color option.

This layout shows your logo centered on a white background, with a dark navigation bar underneath. Replace your entire <header>...</header> with this code, then change your-logo.png to your actual logo filename.

<header>
  <div style="background:#fff; text-align:center; padding:16px;">
    <a href="index.html"><img src="your-logo.png" alt="Your Logo" height="50"></a>
  </div>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
          <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
          <li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Also add this to your CSS to center the navigation links:

nav ul {
    margin: 0 auto;
}

Step 4. Update Your Links

In the navbar code above, the links already use real filenames (index.html, portfolio.html, etc.) as placeholders. Replace them with the actual filenames you use on your site — if your resume page is called bio.html, update that link to match.

Step 5. Choose Your Nav Colors

If you chose Option 1, your logo likely has a white background, so bg-white is already the right fit — swapping to a dark or colored navbar would create a mismatch with your logo. If you chose Option 2, the logo sits on its own white header section and the navbar underneath is independent, so any of the color combinations below will work. Bootstrap uses two classes on the <nav> tag to control color: one for the background and one for the text. The text color class names are a little counterintuitive: navbar-light does not mean light-colored text — it means “this navbar is on a light background,” so Bootstrap uses dark text. Likewise, navbar-dark means “this navbar is on a dark background,” so Bootstrap uses light text. The simple rule: match the text class to your background — light background gets navbar-light, dark background gets navbar-dark. Here are the most common combinations:

Home Portfolio Resume Contact
bg-light + navbar-light
Home Portfolio Resume Contact
bg-dark + navbar-dark
Home Portfolio Resume Contact
bg-primary + navbar-dark
Home Portfolio Resume Contact
bg-success + navbar-dark
Home Portfolio Resume Contact
bg-danger + navbar-dark
Home Portfolio Resume Contact
bg-warning + navbar-light
Home Portfolio Resume Contact
bg-secondary + navbar-dark

To apply a color combination, set both classes on your <nav> tag. For example:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

Step 6. Add the Code to Your Other Pages

Once index.html is working, carefully copy the Bootstrap code to your other pages:

  1. Copy and replace <head>...</head> in its entirety — this is where the Bootstrap CSS link lives
  2. Copy and replace everything from the opening <header> tag through the closing </nav> tag in its entirety
  3. Copy and insert the JavaScript bundle link between </footer> and </body>

Step 7. Add the Active Class

The active class highlights which page the visitor is currently on. On each page of your site, add active to the matching navigation item. For example, on your home page:

<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>

On your portfolio page, move active to the Portfolio item instead, and so on for each page.

Optional: Add a Dropdown Menu

If you need a dropdown menu, replace your navbar with this version:

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-md-center" id="navbars">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="portfolio.html">Portfolio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">More</a>
          <div class="dropdown-menu" aria-labelledby="dropdown10">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

❓ FAQ

Why does the hamburger icon appear but not open when I click it?

The JavaScript bundle file is missing or in the wrong place. Make sure the bootstrap.bundle.min.js script tag is present and placed between </footer> and </body> — not in the <head>.

My custom CSS styles are being overridden by Bootstrap. How do I fix it?

Make sure your own stylesheet is linked after the Bootstrap stylesheet in the <head>. CSS that comes later wins, so placing your stylesheet second lets your rules override Bootstrap’s defaults.

Do I need to add the Bootstrap code to every page?

Yes — each HTML file is independent, so the Bootstrap stylesheet, navbar code, and JavaScript file need to be in every page. Follow Step 6 carefully and test each page after adding the code.

I used Bootstrap 4 before. What changed?

The main differences in Bootstrap 5 are: (1) jQuery is gone — you only need the one bundle file; (2) data-toggle and data-target are now data-bs-toggle and data-bs-target; and (3) mr-auto is now me-auto. If your hamburger menu isn’t working, check those attribute names first.

What if I want a color other than the Bootstrap colors for my navigation?

You can use any color by adding a background-color property to your CSS instead of a bg-* class. Remove the bg-* class from your <nav> tag and add a rule in your stylesheet:

nav {
    background-color: #4a7c59;
}

Replace #4a7c59 with any hex color code. Keep either navbar-light or navbar-dark on the <nav> tag so Bootstrap knows whether to use dark or light text — use navbar-dark for dark backgrounds and navbar-light for light ones.

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons