Bootstrap - Navbar

What Is a Navbar?

A Navbar (short for Navigation Bar) in Bootstrap is a responsive, easy-to-use component that helps you create the main menu or header of your website.

It usually contains:

• Your website’s logo or brand name

• Navigation links (like Home, About, Contact)

• Optional features like:

  • A search box

  • Buttons

  • Dropdown menus

  • A hamburger menu on mobile

Why Use the Bootstrap Navbar?

• It’s responsive (adapts automatically to all screen sizes)

• You don’t need to write custom CSS for layout

• Comes with built-in classes for colors, positioning, and collapsing

• Works well with Bootstrap’s grid system and utilities

Basic Navbar Example

Here’s a simple example of a basic navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" 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>

Breaking Down the Code

How the Navbar Becomes Responsive

The class navbar-expand-lg controls when the navbar changes layout.

Example:

• navbar-expand-lg: Navbar is horizontal on large screens, collapses into a menu button on smaller ones.

• navbar-expand-md: Collapses earlier (on smaller tablets).

Navbar Color Schemes

Bootstrap offers two main themes:

Example:

<nav class="navbar navbar-dark bg-dark">...</nav>

You can also use custom colors, like:

<nav class="navbar" style="background-color: #3498db;">...</nav>

Adding a Dropdown in Navbar

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
    Services
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web Design</a></li>
    <li><a class="dropdown-item" href="#">SEO</a></li>
    <li><a class="dropdown-item" href="#">Marketing</a></li>
  </ul>
</li>

• dropdown-toggle → Makes the link trigger a dropdown.

• data-bs-toggle="dropdown" → Enables Bootstrap’s JavaScript behavior.

• dropdown-menu → Contains the dropdown links.

Adding a Search Form Inside Navbar

<form class="d-flex ms-auto">
  <input class="form-control me-2" type="search" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

This creates a small search bar aligned to the right.

Centering Navbar Links

To center the links in the middle:

<ul class="navbar-nav mx-auto">
  ...
</ul>

mx-auto → gives automatic left and right margins, centering the content.

Sticky and Fixed Navbars

Example:

<nav class="navbar navbar-dark bg-dark fixed-top">...</nav>

In Summary

In Simple Words:

The Bootstrap Navbar is a ready-made, responsive menu bar.
It automatically adapts to screen size — showing a full menu on desktop and a collapsible “hamburger” on mobile.
You can easily add logos, links, dropdowns, and search bars — all with simple Bootstrap classes and no custom CSS.