HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.
The w3-container class adds a 16px left and right padding to any HTML element.
The w3-container class is the perfect class to use for all HTML container elements like:
<div>, <article>, <section>, <header>, <footer>, <form>, and more.
The w3-container provides equality for all HTML container elements:
To use a container, just add a w3-container class to any element:
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
To add a color, just add a w3-color class:
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
The w3-container class can be used to style headers:
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
<header class="w3-container w3-teal">
<h1>Header</h1>
</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:
Footer information goes here
<div class="w3-container w3-teal">
<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>
Many web pages use <div> elements instead of <header> and <footer> elements.
The w3-container class can be used to style <article> and <section> elements:
<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>
Many web pages uses <div> elements instead of <article> and <section> elements.
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)
<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>
<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>
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
I have no top or bottom padding
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
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 paragraph.
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>