software-development-company-logo

Tag: Lesson 14: Creating a Responsive Navbar in Bootstrap

  • Lesson 14: Creating a Responsive Navbar in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to build a fully responsive navigation bar (navbar) using Bootstrap.

    🔹 1. Introduction to Bootstrap Navbar

    A navigation bar (navbar) is a key UI component in websites, allowing users to navigate between pages.
    Bootstrap provides a prebuilt navbar structure with mobile-friendly behavior.

    💡 Why Use Bootstrap Navbar?
    ✔️ Pre-styled and customizable
    ✔️ Mobile-first and responsive
    ✔️ Supports dropdowns, brand logos, and search forms

    🔹 2. Basic Bootstrap Navbar Structure

    A Bootstrap navbar is created using the .navbar class.

    ✅ Example: Basic Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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>

    🔹 What happens?

    • The brand/logo appears on the left.
    • The menu collapses into a hamburger button on small screens.

    🔹 3. Customizing Navbar Colors & Themes

    You can change the navbar color scheme using .navbar-light and .navbar-dark.

    ✅ Example: Dark Navbar with a Blue Background

    html
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
    <a class="navbar-brand" href="#">My Website</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="#">Blog</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The navbar background turns blue (bg-primary).
    • The text is white (navbar-dark) for better contrast.

    🔹 4. Adding a Dropdown Menu

    Dropdown menus allow users to select options from a list.

    ✅ Example: Navbar with a Dropdown

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
    Services
    </a>
    <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Web Development</a></li>
    <li><a class="dropdown-item" href="#">SEO</a></li>
    <li><a class="dropdown-item" href="#">Marketing</a></li>
    </ul>
    </li>
    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav>

    🔹 What happens?

    • The “Services” menu expands on hover to show more options.

    🔹 5. Adding a Search Box to the Navbar

    A search input field can be placed inside the navbar.

    ✅ Example: Navbar with a Search Box

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
    <a class="navbar-brand" href="#">Brand</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 me-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>
    <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>

    🔹 What happens?

    • A search bar appears on the right of the navbar.
    • The search button uses .btn-outline-success.

    🔹 6. Making the Navbar Sticky or Fixed

    You can make the navbar stick to the top of the page when scrolling.

    1️⃣ Sticky Navbar

    Use .sticky-top to keep the navbar always visible at the top.

    ✅ Example: Sticky Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container">
    <a class="navbar-brand" href="#">Sticky Navbar</a>
    </div>
    </nav>

    🔹 What happens?

    • The navbar remains at the top when scrolling.

    2️⃣ Fixed Navbar

    Use .fixed-top to always keep the navbar at the top.

    ✅ Example: Fixed Navbar

    html
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
    <a class="navbar-brand" href="#">Fixed Navbar</a>
    </div>
    </nav>

    🔹 What happens?

    • The navbar stays fixed at the top, even when scrolling.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Navbar.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What Bootstrap class makes a navbar responsive?
    a) .navbar-fixed
    b) .navbar-responsive
    c) .navbar-expand-lg
    d) .navbar-mobile

    ✅ Correct Answer: c) .navbar-expand-lg

    2️⃣ What class is used to make a navbar sticky when scrolling?
    a) .fixed-navbar
    b) .sticky-navbar
    c) .navbar-top
    d) .sticky-top

    ✅ Correct Answer: d) .sticky-top

    3️⃣ How do you add a dropdown menu inside a Bootstrap navbar?
    a) .navbar-dropdown
    b) .dropdown-menu
    c) .menu-dropdown
    d) .navbar-toggle

    ✅ Correct Answer: b) .dropdown-menu

    📌 True or False

    4️⃣ The .navbar-dark class makes navbar text light-colored.
    ✅ Answer: True

    5️⃣ The .navbar-toggler class is required to make a navbar collapsible on mobile.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a fully responsive Bootstrap navbar with:

    • A brand/logo
    • A dropdown menu for “Services”
    • A search box inside the navbar
    • A sticky navbar at the top
      ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Bootstrap Navbar (.navbar) provides mobile-friendly navigation.
    ✅ .navbar-expand-lg makes the navbar expand on larger screens.
    ✅ Dropdowns (.dropdown-menu) add extra menu options.
    ✅ .sticky-top and .fixed-top keep the navbar visible when scrolling.