W3.CSS Containers:

In W3.CSS, container is a simple box that can contain any HTML content like- text, images, tables, links, lists, forms etc.
The HTML tags that can use W3.CSS container are:

<div> . . . </div>
<header> . . . </header>
<footer> . . . </footer>
<article> . . . </article>
<section> . . . </section>

We simply add a class w3-container along with a colour to the mentioned tags.

Using class w3-container and w3-color:

<div class="w3-container w3-indigo">
  <h2>India</h2>
  <p>India is a great country. Geographically it is located in South Asia.</p>
</div>

Here, the class w3-container makes a container and, the class w3-indigo puts an indigo background to the div.
Output:

We can add all classes of colors to a W3.CSS container like:

<div class=“w3-container”>

<div class=“w3-container w3-indigo”>

<div class=“w3-container w3-indigo w3-text-red”>

<div class=“w3-container w3-indigo w3-text-red w3-hover-orange”>

<div class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

Even the tags <div>, <header>, <footer>, <section> and <article> behave same:

<div class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

<header class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

<footer class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

<section class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

<article class=“w3-container w3-indigo w3-text-red w3-hover-orange w3-hover-text-green”>

An example showing containers using <header>, <footer>, <section> and <article> tags:

<header class="w3-container w3-indigo">
  <h2>India</h2>
  <p>India is a great country. Geographically it is located in South Asia.</p>
</header>

<article class="w3-container w3-light-gray">
  <h2>Culture</h2>
  <p>India is a great country. Geographically it is located in South Asia. India is a great country. Geographically it is located in South Asia. India is a great country. Geographically it is located in South Asia.</p>
</article>

<article class="w3-container w3-pale-yellow">
  <h2>History</h2>
  <p>India is a great country. Geographically it is located in South Asia. India is a great country. Geographically it is located in South Asia. India is a great country. Geographically it is located in South Asia.</p>
</article>

<footer class="w3-container w3-orange">
  <h5>Footer</h5>
</footer>

Output:

As we seen the output on previous slide, the following outcomes can be observed:

We see that all container elements are stuck to each other.
An element with a W3.CSS container does not has any margin.
But has a padding of 16px in left and right.
All the tags <div>, <header>, <footer>, <section> and <article> behave the same.