What is navbar in bootstrap?

A navbar in Bootstrap is a standard navigation bar, typically used for site navigation and branding. It is designed to be responsive and can collapse on smaller screens.

Understanding Bootstrap Navbars

A Bootstrap navbar provides a flexible and responsive way to implement site navigation. Here's a breakdown of its key components and how to use them:

• Basic Structure:

  • The .navbar class is the foundation for creating a standard navigation bar.
  • The .navbar-expand-xl|lg|md|sm class is used to make the navbar responsive. It specifies at which screen size the navbar will collapse vertically (extra large, large, medium, or small screens).
  • A <ul> element with the class "navbar-nav" is used to contain the links within the navbar.

Example of a Simple Navbar

Below is a basic illustration of a Bootstrap navbar structure.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Key Navbar Classes Explained

Class	Description
.navbar	Creates the basic navbar structure.
.navbar-expand-*	Makes the navbar responsive and specifies the breakpoint at which it expands horizontally.
.navbar-nav	A container for the navbar links.
.nav-item	Represents an individual item within the navbar.
.nav-link	Styles the links within the navbar.
.navbar-brand	Used for the company, project, or product name.
.navbar-toggler	The button that appears on smaller screens to toggle the navbar's collapsed state.
.collapse .navbar-collapse	Wraps the content that will be collapsed on smaller screens.