The Container Class
The w3-container class is the most important of the W3.CSS classes.
The w3-container class is 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.
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
Example
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</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 most populous city in the United Kingdom.</p>
</div>
Try It Yourself »
Headers and Footers
The w3-container class can be used to style a header:
Heading 1
The w3-container class can be used to style a footer:
Example
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself »
Articles and Sections
The w3-container class can be used to style <article> and <section> elements:
Example
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
Try It Yourself »
Many web pages uses <div> elements instead of <article> and <section> elements.
Notes, Panels, and Quotes
The w3-container class can be use to display all kinds of notes:
Example
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
Try It Yourself »
The w3-container class can be use to display all kinds of panels:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Example
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 13 million inhabitants.</p>
</div>
Try It Yourself »
The w3-container class can be use to display all kinds of quotes:
Example
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Try It Yourself »
Go to the chapter W3.CSS Borders to learn more about displaying notes, panels, and quotes.
Combinations
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-red">
<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-red">
<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 Heading 1
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am Heading 1</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 wothout a margin between them:
I am Heading 1
I am a paragraph.
I am Heading 1
I am a paragraph.
The w3-section class can be used to separate containers. It has 16px top and bottom margin:
I am Heading 1
I am a paragraph.
I am Heading 1
I am a paragraph.
Example
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself »
Hiding (Closing) Containers
Hiding or closing 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 »
Opening Containers
Opening closed containers is easy:
Example
<div id="id01"class="w3-container w3-margin-top 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.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try It Yourself »