Lesson Content

1. Bootstrap Navigation Bars (Navbars)

a. Overview

Definition: Navbars are responsive navigation headers that include support for branding, navigation, and more.
Features: Collapsible menus, responsive behavior, and extensive customization options.

b. Basic Navbar Structure

Components: .navbar, .navbar-brand, .navbar-nav, .nav-item, .nav-link
Example:

html
Copy code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">BrandName</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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>
    </ul>
  </div>
</nav>

c. Navbar Variations

Themes: .navbar-light with light backgrounds, .navbar-dark with dark backgrounds.
Color Schemes: .bg-primary, .bg-secondary, .bg-success, etc.
Example: Dark Navbar

html
Copy code
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">DarkBrand</a>
  <!-- Rest of the navbar -->
</nav>

2. Bootstrap Dropdown Menus

a. Overview

Definition: Dropdowns are toggleable menus that allow users to select from multiple options within a confined space.
Features: Integrates seamlessly with navbars and other components, customizable appearance.

b. Basic Dropdown Structure

Components: .dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-item
Example:

html
Copy code
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

c. Dropdown Variations

Dropdowns with Headers:

html
Copy code
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <h6 class="dropdown-header">Dropdown Header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Dropdowns with Dividers:

html
Copy code
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <a class="dropdown-item" href="#">Action</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Another action</a>
</div>

3. Building a Responsive Header

a. Overview

Definition: A responsive header adjusts its layout and content presentation based on the device’s screen size, ensuring optimal usability and aesthetics.
Features: Combines navbars, branding, and responsive elements like toggler buttons.

b. Steps to Build a Responsive Header

Create the Navbar Structure:
- Include the .navbar, .navbar-brand, and toggle button for smaller screens.
Add Navigation Links and Dropdowns:
- Use .navbar-nav, .nav-item, .nav-link, and .dropdown classes.
Ensure Responsiveness:
- Utilize Bootstrap’s grid system and responsive classes to adapt the header layout.

Example: Responsive Header with Dropdown

html
Copy code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">BrandName</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="responsiveNavbar">
    <ul class="navbar-nav ml-auto">
      <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="#">About</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Web Development</a>
          <a class="dropdown-item" href="#">App Development</a>
          <a class="dropdown-item" href="#">SEO Optimization</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

c. Enhancing the Header with Additional Elements

Search Bar:

html
Copy code
<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

Buttons and Icons:

html
Copy code
<ul class="navbar-nav ml-auto">
  <!-- Existing nav items -->
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="fas fa-user"></i> Login</a>
  </li>
</ul>

Day 7: Bootstrap Navigation Bars, Dropdown Menus, and Building a Responsive Header