Bootstrap Navigation Bar
A navigation bar is like a navigation header that is placed at the top of the page. You can collapse or extend it according to the screen size.
You can create a standard navigation bar at the top of the page with with <nav class=”navbar navbar-default”>.
See this example:
Bootstrap Inverted Navigation Bar
Inverted navigation bar provides an alternative black navbar. It can be used to style the default navigation bar by changing .navbar-default class into .navbar-inverse class .
See this example:
Bootstrap Navigation Bar with Dropdown
You can also add dropdown menu with navigation bars. The following example adds a dropdown menu for the "page 1" button.
See this example:
Bootstrap Right-Aligned Navigation Bar
Use the .navbar-right class to right-align navigation bar buttons. In the following example, we add "Sign Up"and "Log in" button to the right in the navigation bar.
See this example:
Basic Navbar
In Bootstrap 4, you can extend or collapse a navigation bar depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra-large, large, medium or small screens).
To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class.
Example:
Vertical Navbar
If you want to create a vertical navigation bar, remove the .navbar-expand-xl|lg|md|sm class.
Example:
Colored Navbar
You can use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).
Note: 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.
Example:
Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your page.
Example:
If you use .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.
Example:
Navbar Forms and Buttons
The <form> element with class="form-inline" is used to group inputs and buttons side-by-side.
Example:
You can also use other input classes, such as .input-group-addon to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.
Example:
Navbar Text
The .navbar-text class is used to vertical align any elements inside the navbar that are not links. You must ensure the proper padding and text color.
Example:
Fixed Navigation Bar
You can make navigation bar to be fixed at the top or at the bottom of the page. The fixed navigation bar stays visible at a fixed position (top or bottom) without depending on page scrolling.
Top Fixed navbar
The .fixed-top class makes the navigation bar fixed at the top.
Example:
Bottom Fixed Navbar
The .fixed-bottom class is used to make the navbar stay at the bottom of the page.
Example:
Sticky Navbar
A sticky navigation bar stays fixed at the top of the page when you scroll past it. You can see the effect by scrolling this page.
Note: This facility doesn't work in IE11 and earlier version.
Example: