THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Containers


HTML Containers

Typical HTML container elements are:

  • <div>
  • <header>
  • <footer>
  • <article>
  • <section>
  • <blockquote>

Container Classes

Container classes are important for providing:

  • Common margins
  • Common paddings
  • Common vertical alignments
  • Common horizontal alignments
  • Common fonts
  • Common colors

The W3.CSS w3-container class is the perfect CSS class for HTML containers. It can be used to display all kinds of headers, footers, articles, sections, alerts, notes, panels, or quotes.

It only depends on what colors you choose !!!

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 »

Displaying Panels and Notes

Notes are often displayed with a pale color and a colored bar:

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

Panels can be displayed in a million different ways:

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.


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.


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.


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 »

Displaying Quotes

The w3-container class can be use to display quotes.

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

Albert Einstein


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

Albert Einstein


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

If you use HTML <blockquote>, remember that HTML will add an extra left margin:

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

Albert Einstein

Example

<blockquote 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>
</blockquote> 
Try It Yourself »

Headers and Footers

To style a header, use the w3-container class:

Heading 1

Example

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

To style a footer, use the w3-container class:

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

In HTML, <article> and <section> elements are often styled just like <div> elements.

To style an article, use the w3-container class:

Example

<div class="w3-container">
  <p>Some text.</p>
</div>

<article class="w3-container">
  <p>Some text.</p>
</article>

<section class="w3-container">
  <p>Some text.</p>
</section>
Try It Yourself »

Padding

The w3-container class has padding of 1px (top and bottom), and 16px (left and right).

If you want to change the padding for a container, you can use a w3-padding class: 

Example

<div class="w3-container w3-padding-32 w3-red">

<h2>London</h2>

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

Code Containers

HTML Example

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Try It Yourself »

CSS Example

<div class="w3-code cssHigh">

.. CSS code here

</div>
Try It Yourself »

JavaScript Example

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Try It Yourself »

Hiding (Closing) Containers

Hiding or closing a container is easy:

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 »

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.png" 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.png" 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 »