Basic Navbar Example
A navigation bar is a navigation header that is placed at (usually) the top of the page.
The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).
Small breakpoint
Medium breakpoint
Large breakpoint
Extra Large breakpoint
Always vertical
Colored Navbar
Use any of the .bg-color classes to add a background color to the navbar.
Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color.
Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your page.
Sticky Navbar
A sticky navigation bar stays fixed at the top of the page when you scroll past it.
Scroll this page to see the effect. Note: sticky-top does not work in IE11 and earlier.
Brand / Logo
When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar. I am not sure what this styling is. The width has to be manually specified.
Collapsible Navbar
In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
Only when the button is clicked, the navigation bar will be displayed.
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
Always Collapsed Navbar
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
Navbar With Dropdown
This example adds a dropdown menu in the navbar.
Navbar Forms
Use the .form-inline class to align form elements side by side inside the navbar.
Navbar Forms
Use the .input-groupaddon class to attach an icon or help text
Navbar Text
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding).