Basic Navbar in Bootstrap

A navbar in Bootstrap is a flexible navigation component that allows you to create a responsive and stylish navigation menu for your website or application. Bootstrap's navbar component is designed to adapt to different screen sizes, ensuring that your navigation is functional and visually appealing on all devices.

1. Basic Navbar Structure

A basic Bootstrap navbar includes several key elements:

• Navbar Container: The wrapper for the navbar.
• Brand: A section for branding or logo, often with a link to the homepage.
• Navbar Items: Links or navigation items.
• Toggle Button: A button to collapse the navbar on smaller screens.

Classes:

• .navbar: The base class for the navbar.
• .navbar-brand: Adds branding or a logo.
• .navbar-nav: A container for navigation items.
• .navbar-toggler: Button for toggling the navbar on small screens.
• .navbar-collapse: Container for collapsing navbar content on smaller screens.

Example:

<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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

• .navbar: The base class for the navbar.
• .navbar-expand-lg: Expands the navbar on large screens and collapses it on smaller screens. You can replace lg with sm, md, or xl based on your needs.
• .navbar-light: Applies light background and text colors. You can also use .navbar-dark for dark themes.
• .bg-light: Sets a light background color for the navbar.
• .navbar-toggler: The button that appears on smaller screens to toggle the visibility of the navbar content.
• .navbar-collapse: The container for collapsing the navbar content on smaller screens.

2. Navbar Components

a. Navbar Brand

The navbar brand is typically used for branding or logo placement.

Class: .navbar-brand

Usage:

<a class="navbar-brand" href="#">Brand</a>

• .navbar-brand: Styles the brand name or logo, often linked to the homepage.

b. Navbar Nav

The navbar nav component contains the navigation links.

Class: .navbar-nav

Usage:

<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>
  <!-- More items -->
</ul>

• .navbar-nav: Wraps the navigation links.
• .nav-item: Represents each navigation item.
• .nav-link: Styles the navigation links.

c. Navbar Toggler

The navbar toggler button is used to show or hide the navbar content on small screens.

Class: .navbar-toggler

Usage:

<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>

• .navbar-toggler: The button that triggers the collapsing or expanding of the navbar content.
• data-toggle="collapse": Specifies that the button will toggle the collapse state.
• data-target="#navbarNav": Identifies the target element to collapse or expand.

d. Navbar Dropdown

The navbar dropdown allows for additional navigation options in a dropdown menu.

Class: .dropdown-menu, .dropdown-item

Usage:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

• .dropdown-menu: Container for dropdown items.
• .dropdown-item: Individual item in the dropdown menu.
• .dropdown-divider: Adds a divider between dropdown items.

3. Navbar Alignment

You can align navbar content using utility classes:

• .justify-content-start: Aligns items to the start of the navbar (left).
• .justify-content-center: Centers items in the navbar.
• .justify-content-end: Aligns items to the end of the navbar (right).

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
    </ul>
  </div>
</nav>

• .mr-auto: Pushes the first list to the start.
• .ml-auto: Pushes the second list to the end.

4. Responsive Navbar

Bootstrap's navbar is responsive by default, collapsing into a hamburger menu on smaller screens. You can control the breakpoint at which the navbar collapses using the following classes:

• .navbar-expand-sm: Expands the navbar on small screens (≥576px).
• .navbar-expand-md: Expands the navbar on medium screens (≥768px).
• .navbar-expand-lg: Expands the navbar on large screens (≥992px).
• .navbar-expand-xl: Expands the navbar on extra-large screens (≥1200px).

Example:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</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>
      <!-- More items -->
    </ul>
  </div>
</nav>

• .navbar-expand-md: The navbar will be expanded on medium screens and above, and collapsed on smaller screens.

Summary of Basic Navbar in Bootstrap

• Navbar Structure: Use .navbar, .navbar-brand, .navbar-nav, .navbar-toggler, and .navbar-collapse to create a basic navigation bar.
• Navbar Components:
  • Brand: Use .navbar-brand for branding or logo.
  • Nav Items: Use .navbar-nav, .nav-item, and .nav-link for navigation links.
  • Toggler: Use .navbar-toggler to toggle the navbar on smaller screens.
  • Dropdown: Use .dropdown-menu and .dropdown-item for dropdown menus.