W3.CSS — Containers

Basic Container

The w3-container class adds padding (16px) to any element:

<div class="w3-container">
    <h1>Hello World</h1>
    <p>This is a paragraph inside a container.</p>
</div>

Container with Background

<div class="w3-container w3-white">
    <h2>White Background</h2>
    <p>Content with white background.</p>
</div>

<div class="w3-container w3-light-grey">
    <h2>Light Grey Background</h2>
    <p>Content with light grey background.</p>
</div>

Panel

Panels are containers with a border:

<div class="w3-panel w3-leftbar w3-border-blue">
    <p>This is a panel with a left border.</p>
</div>

Note Panel

<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
    <p><strong>Note:</strong> This is an important note.</p>
</div>

Tip Panel

<div class="w3-panel w3-pale-green w3-leftbar w3-border-green">
    <p><strong>Tip:</strong> This is a helpful tip.</p>
</div>

Warning Panel

<div class="w3-panel w3-pale-yellow w3-leftbar w3-border-yellow">
    <p><strong>Warning:</strong> Be careful with this!</p>
</div>

Danger Panel

<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
    <p><strong>Danger:</strong> This could cause errors!</p>
</div>

Container Sizes

<!-- Full width -->
<div class="w3-container w3-mobile">Full width content</div>

<!-- Half width on mobile -->
<div class="w3-container w3-half">Half width</div>

<!-- Third width on mobile -->
<div class="w3-container w3-third">Third width</div>

Mini Practice

Create HTML code that:

1. Creates a basic container with text
2. Adds a panel with a left border
3. Creates a note panel with blue styling
4. Adds a warning panel with yellow styling

Up Next

Next: Learn about W3.CSS Colors.