A navigation bar is a navigation header that is placed at 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).
A navigation bar is a navigation header that is placed at the top of the page.
Use the .justify-content-center class to center the navigation bar.
In this example, the navbar will be centered on medium, large and extra large screens. On small screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class).
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.
The .navbar-brand class is used to highlight the brand/logo/project name of your page.
When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding).
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
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.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.