Navbar | Bootstrap collapse menu
DocumentationandexamplesforBootstrap’spowerful,responsivenavigationheader,thenavbar.Includessupportforbranding,navigation,andmore,includingsupportforourcollapseplugin.HowitworksHere’swhatyouneedtoknowbeforegettingstartedwiththenavbar:Navbarsrequireawrapping.navbarwith.navbar-expand{-sm|-md|-lg|-xl}forresponsivecollapsingandcolorscheme[1]classes.Navbarsandtheircontentsarefluidbydefault.Useoptionalcontainers[2]tolimittheirhorizontalwidth.Useourspacing[3]andflex[4]utilityclassesforcontrollingsp...
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
How it worksHere’s what you need to know before getting started with the navbar:
Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme[1] classes. Navbars and their contents are fluid by default. Use optional containers[2] to limit their horizontal width. Use our spacing[3] and flex[4] utility classes for controlling spacing and alignment within navbars. Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display[5] utility class. Ensure accessibility by using a <nav>...