With Bootstrap, a navigation bar can extend or collapse, 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:

Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar:

Add the .justify-content-center class to center the navigation bar.

The following example will center the navigation bar 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 change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)

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.

Active/disabled state: Add the .active class to an <a> element to highlight the current link, or the .disabled class to indicate that the link is un-clickable.

The .navbar-brand class is used to highlight the brand/logo/project name of your page:

Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: "thetarget".

Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.

Navbars can also hold dropdown menus:

Add a <form> element with class="form-inline" to group inputs and buttons side-by-side:

Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The .fixed-top class makes the navigation bar fixed at the top:

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.