Bootstrap .container general usage - html

Question

I have started digging into Bootstrap and I'm a bit confused about the usage of the .container class.
Most of the tutorials recommend using the following structure:
-.container
--.row
---.col-
---.col-
Etc
I have stumbled upon this W3schools example:
W3Schools - Bootstrap,
which uses multiple .container elements and doesn't wrap everything inside a .container (e.g. the carousel).
So my questions:
In which cases is it advisable to use multiple .container elements?
Is there a general rule for which types of elements shouldn't be wrapped inside a .container?

Answer 1

Statutory Warning: Don't follow W3Schools. This is one of the typical examples where they are not following the Bootstrap standards plus, the examples are not so good. (See W3Fools). It's always advisable to follow the primary documentation of Bootstrap.
Multiple containers are perfectly okay to separate contents, one best way I could say is, if you have any instance of the background extending to the whole width, then you will definitely use multiple containers.
See the below example:
* {font-family: 'Segoe UI';}
section.about {background-color: #fcc;}
section.contact {background-color: #cfc;}
section.info {background-color: #ccf;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 1</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 2</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 3</div>
</div>
</div>
</section>
<p>With more content</p>
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
Preview

Answer 2

The container element is required by bootstrap to host its grid system. Therefore, you should always have one HTML tag with the .container class. You can also use multiple containers below each other. Nested containers don't work, because they are not nestable due to their padding.
If you want to have full width elements, use the .container-fluid class. This way you can implement carousel items and full width banners.
The container element acts as the root element of your bootstrap application, that hosts all your other elements. Therefore, every bootstrap element should be inside a container.