Bootstrap Navigation Bar

Bootstrap Navigation Bar (Navbar) is a responsive horizontal menu for site navigation. It can include links, dropdowns, brand/logo, forms, and buttons. Navbars collapse automatically on smaller screens for mobile-friendly design.

Available in Bootstrap 3, 4, and 5. Classes and structure differ slightly between versions.

✅ Basic Navbar


 

  • .navbar → Defines the navbar.

  • .navbar-default → Default gray style.

  • .navbar-header → Container for brand/logo.

  • .navbar-nav → Container for links.

  • .active → Highlights current page link.

🔹 Navbar with Dropdown



 

  • .dropdown → Container for dropdown menu.

  • .dropdown-toggle → Makes the menu toggleable.

  • .dropdown-menu → Contains menu items.

📱 Responsive Collapsible Navbar



 

  • .navbar-toggle → Hamburger menu button for small screens.

  • .collapse.navbar-collapse → Collapsible menu links.

🔹 Navbar with Right-Aligned Links



 

  • .navbar-right → Moves items to the right side of the navbar.

🎨 Navbar Colors

Class Color
navbar-default Light gray
navbar-inverse Dark/black


 

✔ Summary

Feature Supported
Brand/logo ✔️
Links menu ✔️
Dropdowns ✔️
Right-aligned links ✔️
Collapsible responsive menu ✔️
Dark/light color schemes ✔️

You may also like...