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: