Bootstrap navbar, should I nest containers?

Question

It's displayed in the documentation that containers should never be nested. This statement seems to find mostly agreement in diverse stackoverflow posts.

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

However the bootstrap example of a navbar uses container nesting.

<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
      <li><a href="../navbar-static-top/">Static top</a></li>
      <li><a href="../navbar-fixed-top/">Fixed top</a></li>
    </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->

I'm new to bootstrap and webdesign, could/should the container nesting be avoided in this case ? Why was it used ?

Answer 1

This has been identified as an issue in Bootstrap:

https://github.com/twbs/bootstrap/issues/15512

Although, it appears to have been closed. It seems that the real issue was nesting container inside container, not so much container-fluid, and the doc was not accurately updated to reflect that.

Answer 2

What they mean by not nesting containers is NOT doing the following...

<div class="container">
    <div class="container"></div>
</div>

This is because the padding of each container would throw one out of the other and it's simply not styled as such to deal with that scenario.

Your above example of the navbar is perfectly acceptable providing you do not nest containers within containers.