• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Navbar

← Previous Next →

Navigation bars, or navbars, are essential for any website or web application. They provide a consistent way for users to navigate pages, access menus, and interact with important features. Bootstrap 4’s Navbar component offers a flexible, responsive, and mobile-friendly solution for creating professional navigation headers. This tutorial covers everything from basic navbars to advanced customization and responsive behavior.

What Is a Navbar?

A navbar is a horizontal bar, usually at the top of a page, containing links, branding, buttons, forms, and other navigation elements. Bootstrap 4 provides .navbar as the main class, with additional classes for coloring, expanding, collapsing, and alignment.

Basic Navbar

The simplest navbar includes the .navbar and .navbar-light or .navbar-dark classes with a background color using .bg-*.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">MyWebsite</a>
</nav>

This creates a clean header with a brand logo or name.

Navbar with Links

You can add navigation links using .navbar-nav and .nav-item inside the navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MyWebsite</a>
  <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="#">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Messages</a>
    </li>
  </ul>
</nav>

The .active class highlights the current page.

Responsive Navbar

Bootstrap 4 makes navbars responsive with the .navbar-expand-* classes. The navbar expands on larger screens and collapses into a toggle button on smaller devices.

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">MyWebsite</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="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Messages</a>
      </li>
    </ul>
  </div>
</nav>

The .navbar-toggler button appears on smaller screens to expand or collapse the menu.

Navbar Colors and Themes

Bootstrap 4 provides .navbar-light and .navbar-dark to adjust text colors, combined with .bg-* for background. Example:

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Dark Navbar</a>
</nav>

Dark navbars are suitable for modern designs or contrasting sections.

Navbar Brand

The .navbar-brand class is used for the site logo or name. It can be text or an image.

<a class="navbar-brand" href="#">
  <img src="https://via.placeholder.com/30" width="30" height="30" alt="Logo"> MyWebsite
</a>

Branding ensures consistent identity across all pages.

Navbar Alignment

Navbar items can be aligned using .ml-auto for right alignment or .mr-auto for left alignment.

<ul class="navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

This is useful for positioning login buttons, search bars, or action links.

Navbar with Dropdowns

Navbars can include dropdown menus using .dropdown inside .navbar-nav.

<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">
    Menu
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
  </div>
</li>

Dropdowns help group related links without cluttering the navbar.

Navbar with Forms

You can include forms inside navbars for search or login purposes.

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

Forms inside navbars improve functionality while keeping a clean layout.

Sticky and Fixed Navbars

Bootstrap allows sticky or fixed positioning:

  • .sticky-top – sticks the navbar at the top when scrolling.

  • .fixed-top – fixes the navbar permanently at the top.

  • .fixed-bottom – fixes the navbar at the bottom.

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

Sticky navbars enhance navigation accessibility on long pages.

Best Practices

  1. Keep navbars simple and organized.

  2. Use responsive classes to handle mobile devices.

  3. Combine dropdowns, forms, and buttons wisely.

  4. Use sticky or fixed navbars when necessary.

  5. Ensure contrast and accessibility for text and links.

Practical Examples

  • Header Navbar: Standard top navigation with links and brand logo.

  • Admin Panel Navbar: Includes dropdown menus for user actions and settings.

  • Search Navbar: Incorporates a search form inside the navigation bar.

  • Sticky Navbar: Remains visible as users scroll down long pages.

  • Dark Themed Navbar: Provides a modern look for websites with dark sections.

Summary of the Tutorial

Bootstrap 4 navbar is a flexible and responsive component for creating professional navigation headers. It supports branding, links, dropdowns, forms, and alignment options. Proper use of navbars improves user experience, ensures accessibility, and maintains consistent navigation across a website or application.

Practice Questions

  1. Create a basic navbar with a brand name and three navigation links: Home, Profile, Messages.

  2. Create a responsive navbar that collapses into a toggle button on small screens using .navbar-expand-md.

  3. Create a dark-themed navbar using .navbar-dark and .bg-dark.

  4. Add a logo image to the navbar brand using <img> inside .navbar-brand.

  5. Create a navbar with one dropdown menu containing two items.

  6. Add a search form inside the navbar with an input field and submit button.

  7. Create a sticky-top navbar that remains visible when scrolling.

  8. Create a navbar with right-aligned links using .ml-auto.

  9. Create a navbar with both left-aligned and right-aligned links for a balanced layout.

  10. Create a fixed-bottom navbar that stays at the bottom of the viewport with three navigation links.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top