Javatpoint Logo
Javatpoint Logo

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:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now

Vertical Navbar

If you want to create a vertical navigation bar, remove the .navbar-expand-xl|lg|md|sm class.

Example:

Test it Now

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:

Test it Now

Brand / Logo

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

Example:

Test it Now

If you use .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar.

Example:

Test it Now

Navbar Forms and Buttons

The <form> element with class="form-inline" is used to group inputs and buttons side-by-side.

Example:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now

Bottom Fixed Navbar

The .fixed-bottom class is used to make the navbar stay at the bottom of the page.

Example:

Test it Now

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:

Test it Now




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA