Nav

Lecture 103:- Navbar

In Bootstrap, the Navbar component is used to create a responsive navigation bar that collapses on smaller screens and can be expanded on click or tap. The Navbar can include links, dropdowns, and other components, and can be customized with various classes and options.

Here is an example of how to create a basic Navbar in Bootstrap:

htmlCopy code

<nav class="navbar navbar-expand-lg navbar-light bg-light">  <a class="navbar-brand" href="#">My Website</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</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> </nav>

In this example, we have a nav element with the navbar class and various other classes for styling and functionality. We have a navbar-brand element for the website logo or name, a navbar-toggler button for toggling the collapsed state of the Navbar, and a navbar-collapse div that contains the ul element with the navigation links.

We also have the data-toggle and data-target attributes on the navbar-toggler button, which tell Bootstrap to use the Collapse component on the navbar-collapse div when the button is clicked.

The Navbar component can be customized with various classes and options, such as changing the color, position, or layout of the Navbar, adding dropdowns or forms, or using a fixed Navbar that remains visible on scroll.