Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
navigation bar
communitycreator

How to use the bootstrap navigation bar

Chinweuba Elijah Azubuike

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

Bootstrap navigation bar

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.

RELATED TAGS

bootstrap
navigation bar
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring