Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Building a Navbar

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,262 Points

What's the difference between nav and navbar?

What's the difference between nav and navbar? I always thought it's basically the same thing.

The answer is best summarized here. found this answer from freeCodeCamp user:

"...I believe .nav-bar is intended for the main page navigation on top of the page and has a whole bunch of styling attributes available. The .nav class is for simple navigation and adds a display: flex; attribute to the nav ul links. I believe you can have a .nav and style it with .nav-bar attributes if you just at the .nav-bar class to the element."

3 Answers

Steven Parker
Steven Parker
231,072 Points

A "navbar" is an area on a page that contains navigation components (links, buttons, etc) for getting to other pages of the website.

A "nav" is an HTML element that is normally used to enclose other elements related to navigation. The complete set of the "nav" and the other elements it encloses would typically render the navbar.

yes but Boostrap4 has a class called nav too. The docs describe it as "The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling."

Steven Parker
Steven Parker
231,072 Points

So you might use the "nav" class in Bootstrap to construct a "navbar" on your page.

and there is also a navbar class in bootsrap. I think whichever she was asking about, we have wrapped up all the answers :)