W3.CSS Containers
The Container Class
The w3-container class is the most important of the W3.CSS classes.
The w3-container class can be used for all types of HTML container elements like:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.
This Header is Green.
This footer is red.
This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown. This article is light grey and the text is brown.
Containers Provides Equality
The w3-container class is important for providing equality:
- Common margins
- Common paddings
- Common vertical alignments
- Common horizontal alignments
- Common fonts
- Common colors
To use a container, just add a w3-container class to any element:
Example
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Try It Yourself »
To add a color, just add a w3-color class:
Example
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Try It Yourself »
Headers and Footers
The w3-container class can be used to style headers:
Header
There is no difference in the way W3.CSS treats <div> and <header> elements.
The w3-container class can be used to style footers:
Example
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Try It Yourself »
Example
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself »
Many web pages uses <div> elements instead of <header> and <footer> elements.
Articles and Sections
The w3-container class can be used to style <article> and <section> elements:
Example
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Try It Yourself »
Many web pages uses <div> elements instead of <article> and <section> elements.
Web Page Example
Header
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)
Example using HTML <div> elements
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
Try It Yourself »
Example using HTML semantic elements
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Try It Yourself »
Container Padding
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Try It Yourself »
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself »
Container Sectioning
The w3-container class has no default top or bottom margin.
Two containers will display without a margin between them:
I am a Heading
I am a paragraph.
I am a Heading
I am a paragraph.
The w3-section class can be used to separate containers. It has 16px top and bottom margin:
I am a Heading
I am a paragraph.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-section w3-blue">
<h1>I am
a Heading</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself »
Hide (Close) a Container
Hiding a container is easy.
To close this container, click on the X in the upper right corner.
Example
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
Try It Yourself »
Show (Open) a Container
Showing (a hidden) container is easy:
Example
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
container</button>
<div id="id01" class="w3-container w3-section w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.</p>
</div>
Try It Yourself »
