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:
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.
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.
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
To style a footer, use the w3-container class:
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
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
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)
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 »
