How to create responsive navbar bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Responsive Navbar with Bootstrap Easily

To create a responsive navbar in Bootstrap, use the navbar component with classes like navbar-expand-lg to control when it collapses. Include a navbar-toggler button that toggles the menu on smaller screens, and wrap the links inside a collapse navbar-collapse container.

📐

Syntax

A Bootstrap responsive navbar uses these main parts:

navbar: The main container for the navigation bar.
navbar-expand-{breakpoint}: Controls when the navbar expands or collapses (e.g., lg means expand on large screens and collapse on smaller).
navbar-toggler: The button that appears on small screens to toggle the menu.
collapse navbar-collapse: Wraps the menu items that collapse on small screens.

html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

Output

A horizontal navigation bar with brand name on left and menu items on right on large screens; on small screens, a toggle button appears that expands/collapses the menu.

💻

Example

This example shows a complete responsive navbar that collapses on screens smaller than large (992px). The toggle button appears on small screens to open or close the menu.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Responsive Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>
    <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 ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A blue navigation bar with brand name on left and menu items on right on large screens; on smaller screens, a hamburger toggle button appears to show or hide the menu.

⚠️

Common Pitfalls

Common mistakes when creating a responsive Bootstrap navbar include:

Forgetting to include Bootstrap's JavaScript bundle, so the toggle button does not work.
Not using the correct data-bs-toggle and data-bs-target attributes on the toggle button.
Missing the collapse navbar-collapse wrapper around the menu items, so the menu does not collapse.
Using an incorrect or missing id on the collapse container that does not match the toggle button's data-bs-target.

Example of a wrong toggle button (missing data-bs-toggle):

html

<button class="navbar-toggler" type="button" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Correct toggle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

📊

Quick Reference

Tips for a responsive Bootstrap navbar:

Use navbar-expand-{breakpoint} to control when the navbar collapses.
Always include the toggle button with data-bs-toggle="collapse" and matching data-bs-target.
Wrap menu links inside a div with collapse navbar-collapse and the matching id.
Include Bootstrap CSS and JS files for styles and toggle functionality.
Use ms-auto class on ul to align menu items to the right.

✅

Key Takeaways

Use navbar-expand-lg to make the navbar responsive and collapse on smaller screens.

Include a navbar-toggler button with correct data-bs-toggle and data-bs-target attributes.

Wrap the menu items inside a collapse navbar-collapse container with a matching id.

Always load Bootstrap's CSS and JavaScript bundle for proper styling and toggle functionality.

Use utility classes like ms-auto to align menu items as needed.