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 useful classes in W3.CSS.
It adds 16px left and right padding to an HTML element.
This gives content consistent spacing and alignment across a web page.
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 »
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
Containers Create 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 horizontal spacing.
Without a w3- container
With w3-container
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 »
<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>
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 »
<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>
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 »
<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>
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 »
<h2>News</h2>
</div>
<div class="w3-container w3-pale-blue">
<p>Latest stories and updates.</p>
</div>
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 »
I have no top or bottom padding.
</div>
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 »
<h2>A Heading</h2>
<p>A paragraph inside a container.</p>
</div>
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
Try It Yourself »
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>
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 »
<h2>More Space</h2>
<p>This container has extra top and bottom padding.</p>
</div>
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 »
<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>
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.
What You Have Learned
The w3-container class gives sections of a page consistent horizontal spacing.
- It adds 16px left and right padding
- It works with
<div>,<header>,<footer>,<section>,<article>, and other elements - It can be combined with colors, padding, cards, and other W3.CSS classes
- It is useful for building the main sections of a web page
More Examples
Explore more examples to see how w3-container can be used.
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 »
<h1>Header</h1>
</div>
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Try It Yourself »
<h1>Header</h1>
</header>
There is no difference in the way W3.CSS treats <div>
and <header> elements.
Stylimng 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 »
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Try It Yourself »
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
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 »
<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>
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 »
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>