How to use the bootstrap navigation bar

Navigation bar

A navigation bar is a section of a site that aids an easy view of different pages on that website. A navigation bar contains almost all the major links to every page on a website. It is mostly on top of the page with named links.

Let's see an example for a better understanding.

Example

Code explanation

Line 13: We use the HTML5 <nav> element with the following bootstrap classes:

• navbar wraps the whole navigation.
• navbar-light makes the navbar text dark and not the normal blue.
• bg-light makes the background of the navigation bar grey.

Line 14: We use the HTML5 <a> element with the following bootstrap classes:

• navbar-brand: Here, we put the website's name. We can also use it to wrap an image if we want to put a logo. This makes the website name look like the "Educative" logo at the top left of this site.

Line 15: We have our ul element to wrap all the navigation links. This is the <li>element. There are two bootstrap classes attached to it:

• nav and nav-pills align and organize the li element to the right.

Line 16: We have the <li> element, which wraps the <a> element. The nav-item class is attached to it. The bootstrap uses the class to evenly space the links and add more design.

Line 17: We have the <a> element which holds the main link with a nav-link bootstrap class. This class takes care of the link designs.

We can add several links by performing the steps from lines 16 to 18.