Paris
Paris is known for art, architecture, food, and history.
W3.CSS Containers
The Container Class
The w3-container class is one of the most important W3.CSS classes.
It provides correct margins, padding, alignments, and more, to most HTML elements.
This gives content consistent spacing and alignment across all web pages.
London
London is the capital of England.
Example
<div class="w3-container w3-blue">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
Try it Yourself »
Consistent Spacing
Without a container, content can run all the way to the edge of its parent element.
With w3-container, the content gets consistent padding and margins.
The w3-container class adds 16px left and right padding to its content and moves headers and paragraph
margins inside the container.
Compare the distance between the text and the edges of the two gray areas:
With w3-container
The same content.
With w3-container
The same content.
Examples
<div class="w3-container">
<p>The w3-container class is an important w3.CSS class.</p>
<p>Containers provide correct margins, padding, alignments, and more, to most HTML elements.</p>
</div>
Try It Yourself »
To add a color, just add a w3-color class:
<div class="w3-container w3-red">
Try It Yourself »
Containers Work with most HTML Elements
The w3-container class can be used with many HTML elements.
For example:
<div><header><footer><section><article><form>
W3.CSS styles classes, not HTML elements.
This means w3-container works the same way on a
<div>, <section>, or <article>.
It also works on other elements like headers <h1>
and paragraphs <p>.
Headers and Footers
Containers are useful for page headers and footers.
My Website
Welcome
This is the main content of the page.
Example
<header class="w3-container w3-teal">
<h1>My Website</h1>
</header>
<div class="w3-container">
<h2>Welcome</h2>
<p>This is the main content of the page.</p>
</div>
<footer class="w3-container w3-teal">
<p>Copyright 2026</p>
</footer>
Try it Yourself »
Sections and Articles
Containers are also useful for grouping sections of content.
Travel Guide
Discover some of Europe's most popular destinations.
Example
<section class="w3-container w3-light-grey">
<h2>Travel Guide</h2>
<p>Discover some of Europe's most popular destinations.</p>
</section>
<article class="w3-container">
<h3>Paris</h3>
<p>Paris is known for art, architecture, food, and history.</p>
</article>
Try it Yourself »
Containers and Colors
Combine w3-container with a W3.CSS color class to create colored sections.
News
Latest stories and updates.
Example
<div class="w3-container w3-indigo">
<h2>News</h2>
</div>
<div class="w3-container w3-pale-blue">
<p>Latest stories and updates.</p>
</div>
Try it Yourself »
Container Padding
The w3-container class adds 16px left and right padding.
It does not add top or bottom padding.
I have 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 HTML headings and paragraphs provide their own top and bottom margins:
A Heading
A paragraph inside a container.
Examples
<div class="w3-container w3-blue">
<h2>A Heading</h2>
<p>A paragraph inside a container.</p>
</div>
Try it Yourself »
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself »
When you need extra vertical space, combine the container with a padding class:
More Space
This container has extra top and bottom padding.
Example
<div class="w3-container w3-blue w3-padding-32">
<h2>More Space</h2>
<p>This container has extra top and bottom padding.</p>
</div>
Try it Yourself »
Build a Page with Containers
Containers can form the basic sections of a complete web page.
City Guide
Explore Copenhagen
Discover architecture, food, canals, and Scandinavian design.
Example
<header class="w3-container w3-black">
<h1>City Guide</h1>
</header>
<section class="w3-container w3-padding-32">
<h2>Explore Copenhagen</h2>
<p>Discover architecture, food, canals, and Scandinavian design.</p>
<button class="w3-button w3-teal">Explore</button>
</section>
<footer class="w3-container w3-light-grey">
<p>City Guide</p>
</footer>
Try it Yourself »
Note
Many web pages use <div> elements instead of
<header> and <footer> elements.
There is no difference in the way W3.CSS treats these elements.
Styling Headers
The w3-container class can be used to style headers:
Examples
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Try It Yourself »
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Try It Yourself »
There is no difference in the way W3.CSS treats <div>
and <header> elements.
Styling Footers
The w3-container class can be used to style footers:
Examples
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Try It Yourself »
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself »
There is no difference in the way W3.CSS treats <div>
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 »
Note
There is no difference in the way W3.CSS treats <div>,
<article> and
<section> elements.
Containers can be rounded:
Example
<div class="w3-container w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
