CODEWITHSUNDEEP
menubootstrap-4navbar
Andy
Andy

Reputation: 49

Bootstrap 4 menu

I'm trying to make a two-lines menu with bootstrap 4, and I found some examples on the web:

In the first example they use "div class='navbar'" to create the menus.

<div class="navbar">...</div>

In the second example they use "nav class='navbar'" to create the menus.

<nav class="navbar">...</nav>

Which is the correct way? Which one should be used?

I have another question. Why do they NOT use the bootstrap grid with the rows and columns? When should you use it?

Thank you very much

Upvotes: 0

Views: 111

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362670

The html5 nav tag has semantic meaning.

Please follow the Bootstrap docs. The grid (row>col) should not be used in the Navbar as it's not a supported component. Using the grid inside the Navbar will through off alignment, spacing and the responsive behavior controlled by the navbar-expand-* classes. I'm the author of both Navbar examples from Codeply you posted.

Upvotes: 0

cloned
cloned

Reputation: 6742

The difference is that a div has no meaning and a nav Element has a semantic meaning (indicating that there is a navigation). You can remove every div and span from a website and have no difference about the semantic structure of a page, every other element has a meaning: For example, states that there is the main content, says here is the header-part of the site.

These parts tell for example search engines what's on a site. So if you have the text "Stackoverflow" in your Element somewhere, google (and other search engines) know that you have a stackoverflow link in your navigation. If you have it in your Tag, you probably have a text about stackoverflow.

Keep in mind: These are some simplified examples.

Upvotes: 0

Sebastian Bergl&#246;nn
Sebastian Bergl&#246;nn

Reputation: 4278

Div and nav are similar element, in terms of what they do. However, nav is better in this situation because you want to have semantic markup. It is because of SEO and more readable for developers.

And why they are not using grid is probably because they haven't implemented it yet and should be coming. Their grid system is done with flex currently, but should change. And CSS Grid does not work that great with IE11.

You should use Grid when you feel that it will be easier to structure your site. It's a great tool, and combine it with Flex is so easy and comfortable

Upvotes: 1

Related Questions