Multiple and/or nested Bootstrap containers?

Question

My understanding is that all Bootstrap-styled elements must exist inside a <div class="container"> element. But sometimes I see Bootstrap examples where there are multiple "containers":

<div class="container">     <!-- Blah, GUI stuff, blah --> </div>  ...  <div class="container">     <!-- Blah, more GUI stuff, blah --> </div> 

My questions:

1. When would you ever need a single HTML page with multiple "container divs"? What benefit does this offer as opposed to just putting the entire body inside one big "container div"?
2. Would you ever want to nest "container divs" inside other ones? When/why?

Answer 1

1. Some sections of the page will span the full viewport width and others won't. Some backgrounds will be the full width but the content won't.

   An example of this is a featurette area which has a background image or color that is the full width of the viewport but the content inside that, forms or whatever, don't exceed the .container at any given viewport width.

2. You don't nest .container or .container-fluid -- see the docs. It's not necessary.

   Docs: 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 [neither means that .container and .container-fluid are NOT to be nested].