Bootstrap Navigation Bar

Introduction

Bootstrap provides pre-designed components like navigation bars, forms, media objects, and carousels, making development faster and easier. In the previous blog, we covered essential Bootstrap components such as Panels, Dropdowns, Collapse, and Tabs, which are useful for organizing content efficiently and creating interactive UI elements.

In this blog, we will explore Bootstrap Navigation Bars, Forms, and Inputs with detailed explanations and examples.

Bootstrap Navigation Bar

A Navigation Bar (Navbar) is an essential component for any website. Bootstrap makes it easy to create stylish and responsive navbars. A standard navigation bar is made with <nav class="navbar navbar-default">.

1. Basic Navigation Bar

Example for a simple navbar using Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" 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>
    </ul>
  </div>
</nav>

Result:

Important Notes:

Use navbar-expand-lg to make the navbar responsive.
The navbar-toggler enables the collapsible menu on smaller screens.
Always wrap links inside <ul class="navbar-nav"> for proper styling.

2. Inverted Navigation Bar

To create a dark-themed navbar, use navbar-dark bg-dark class:

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Dark Navbar</a>
</nav>

Result:

Important Notes:

Use navbar-dark for dark mode and navbar-light for light mode.
Background colors (bg-light, bg-dark, etc.) define the overall look.

3. Navigation Bar With Dropdown

Dropdowns are useful for adding submenus inside the navbar:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</li>

Important Notes:

Always add dropdown-toggle and data-toggle="dropdown" for dropdown functionality.
Use dropdown-menu to style the dropdown list.

4. Right-Aligned Navigation Bar

Navigation bar buttons are aligned to the right using the .navbar-right class. For example:

<ul class="navbar-nav ml-auto">
  <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>

5. Navbar Buttons & Forms

Buttons and forms can be placed inside the navbar:

<form class="form-inline">
  <input class="form-control mr-sm-2" type="search" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

6. Fixed & Collapsible Navbar

A fixed navbar remains at the top when scrolling:

<nav class="navbar fixed-top navbar-light bg-light">

To collapse a navbar on small screens, use navbar-toggler and collapse classes.

Request more information

Bootstrap Navigation Bar