Can anyone shed light on why the semantic Navbar <nav> element is located outside the outermost
<div class="container">Referencing the documentation for Bootstrap Navbar here
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
...
</div>
...
</nav>
I initially believed that, in order to properly utilize Bootstrap, all elements needed to be within a container > row > col structure.
However, after some experience, I've come to realize that there are exceptions and things aren't always straightforward. Therefore, I'm delving into my app's front-end to gain a deeper understanding of the processes involved.
Could it be that the answer lies in the fact that the <nav> element serves a special purpose and therefore resides outside traditional containers, especially when used for site-wide navigation?
My research journey so far:
- Browsed through 10+ "Similar questions"
- Explored getbootstrap.com extensively
- Consulted w3schools
- Conducted a Google search on
"<nav>"