Navbars

Navbar (Navigation Bar) is one of the most essential part of a web site. Bootstrap provides a responsive header which helps your users to navigate through different pages or sections of your web site.

Suppose its a “sentient box” in yourcornerand when you read on your phone, a tablet or a pc, it adjusts it spectrum to your viewport.

1. The Core Components

To build a basic Bootstrap navbar, you typically need these five parts:

The Wrapper (<nav>): The main container that holds everything.
The Brand (navbar-brand): This is the logo or the name of your site. This is normally in the most extreme left.
The Toggler (navbar-toggler): The “Hamburger” icon (three lines) that appears on mobile screens.
The Nav Links (navbar-nav): The actual list of links (Home, About, Contact).
The Collapse (collapse navbar-collapse): A wrapper that tells bootstrap to hide the links on small screens so when the Toggler is clicked is displayed.

2. Essential Classes to Know

Bootstrap uses specific “utility classes” to style the navbar quickly:

Class	What it does
`.navbar`	Identifies the element as a navbar.
`.navbar-expand-lg`	Determines when the navbar should “unfold” from a mobile menu to a full desktop menu (you can use `md`, `lg`, or `xl`).
`.bg-light` / `.bg-dark`	Sets the background color of the bar.
`.fixed-top`	Pins the navbar to the very top so it stays there even when you scroll.
`.sticky-top`	The navbar scrolls with the page until it reaches the top, then stays there.

3. How the “Responsive” Magic Works

Bootstrap adopts a “Mobile-First” strategy. In default the links are stacked vertically and concealed inside a button (hamburger menu).

The button is no longer there when the width of the screen gets to a certain amount (defined as the class {size} class on the navbar-expand) and the links are laid out horizontally.

4. Simple Code Structure

Here is how the HTML looks when these pieces are put together:

HTML

<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">
        <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>
  </div>
</nav>

5. Helpful Tips

Colors: using a dark background – then add the class navbar-dark. It lets the Bootstrap know that it needs to make the text white so that you can see it.
Alignment: The <ul> tag can also have the class ms-auto (margin-start: auto) to float its list items to the right of the bar.
Forms: It‘s quite simple to drop a search bar or “Login” button directly into the navbar to reveal in using the d-flex class.