Bootstrap classic navbar

The Bootstrap navbar is a responsive navigation header that adapts to different screen sizes, making it a must-have for any modern website. Whether you’re building a personal portfolio, an e-commerce site, or a blog, this component gives you a clean and functional navigation solution.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • Flex and spacing utilities for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.
  • Add an optional .navbar-scroll to set a max-height and scroll expanded navbar content.

Customization options

  • Navbar colors: choose different backgrounds for your navbar using .bg-light, .bg-dark, or other background utilities.
  • Full-width Navbars: Want a navbar that spans the entire width of the screen? Just add .container-fluid to the wrapper.
  • Positioning: Fix the navbar to the top or bottom of the page with .fixed-top or .fixed-bottom.