Latest web development tutorials
 

W3.CSS Containers


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

Example

<header class="w3-container w3-teal">
  <h1>Heading 1</h1>
</header>
Try It Yourself »

The w3-container class can be used to style a footer:

Footer

Footer information goes here

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:

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-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.


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:

"Make it as simple as possible, but not simpler."

Albert Einstein

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

Car

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)

Footer

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:

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 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 »