1. Bootstrap Navbar

Step 1: Create a Basic Navbar

• Use .navbar and .navbar-expand-lg for a responsive navigation bar.

• Add .navbar-brand for the website logo or name.

• Use .navbar-nav and .nav-item to create menu links.

👉 Example: Basic Navbar

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

</nav>
✅ Explanation:

.navbar-expand-lg makes the navbar responsive.

.navbar-brand defines the website logo or title.

.navbar-toggler creates a collapsible mobile menu.

.navbar-nav and .nav-item define navigation links.

Step 2: Add a Dark Navbar

• Use .navbar-dark bg-dark to change the navbar color.

👉 Example: Dark Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

✅ Explanation:

• .navbar-dark makes text white.

• .bg-dark applies a dark background color.

Step 3: Add a Search Bar in Navbar

• Use .form-inline to add a search box inside the navbar.

👉 Example: Navbar with Search Bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

✅ Explanation:

• .d-flex aligns elements in a row.

• .form-control styles the search input field.

• .btn-outline-success styles the search button.

Step 4: Add a Dropdown Menu in Navbar

• Use .dropdown and .dropdown-menu to create a dropdown inside the navbar.

👉 Example: Navbar with Dropdown

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-bs-toggle="dropdown">
            Services
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">SEO</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

2. Bootstrap Sidebar

Step 5: Create a Sidebar Layout

• Use .d-flex and .flex-column to align sidebar items vertically.

👉 Example: Simple Sidebar

<div class="d-flex">
  <div class="bg-light p-3" style="width: 250px; height: 100vh;">
    <h4>Sidebar Menu</h4>
    <ul class="list-group">
      <li class="list-group-item"><a href="#">Home</a></li>
      <li class="list-group-item"><a href="#">About</a></li>
      <li class="list-group-item"><a href="#">Services</a></li>
      <li class="list-group-item"><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="p-4">
    <h2>Main Content Area</h2>
    <p>This is where the page content goes.</p>
  </div>
</div>

Step 6: Add a Fixed Sidebar

• Use .position-fixed to make the sidebar fixed on the screen.

👉 Example: Fixed Sidebar

<div class="position-fixed bg-dark text-white p-3" style="width: 250px; height: 100vh;">
  <h4>Sidebar Menu</h4>
  <ul class="list-group">
    <li class="list-group-item bg-dark"><a class="text-white" href="#">Home</a></li>
    <li class="list-group-item bg-dark"><a class="text-white" href="#">About</a></li>
    <li class="list-group-item bg-dark"><a class="text-white" href="#">Services</a></li>
  </ul>
</div>
<div class="p-4" style="margin-left: 260px;">
  <h2>Main Content</h2>
  <p>This area displays the main content.</p>
</div>

✅ Explanation:

• .position-fixed keeps the sidebar fixed.

• .bg-dark changes sidebar background to dark.

• .text-white changes text color to white.

• margin-left: 260px; ensures content does not overlap.

Conclusion

Bootstrap Navbar & Sidebar help in designing structured and responsive navigation systems for websites. By using Bootstrap classes, you can create modern, mobile-friendly, and interactive navigation menus effortlessly. 🚀