W3.CSS Page Containers
Centered Web Pages
The w3-content and w3-auto
classes create web pages with a limited width, centered on the screen.
On large screens, space appears on both sides of the page.
On smaller screens, the page adapts to the available width.
Why Limit the Page Width?
A web page that fills a very wide screen can be difficult to read.
- Lines of text become long
- Images can become too large
- Page elements can appear too far apart
A centered page with a maximum width keeps the layout together with space on both sides.
The w3-content Class
The w3-content class limits the page width and centers the page horizontally on the screen.
Automatic left and right margins center the page.
Add the class to the <body> element or to another container around your page:
Example
<body class="w3-content">
<header class="w3-container w3-blue">
<h1>My Website</h1>
</header>
<main class="w3-container">
<h2>Welcome</h2>
<p>This page has a default maximum width of 980px.</p>
</main>
<footer class="w3-container w3-light-grey">
<p>My Footer</p>
</footer>
</body>
The w3-content class has a default maximum width of
980px.
Set a Custom Page Width
Use the CSS max-width property to change the default maximum page width.
Examples
Create a page with a maximum width of 1500px:
<body class="w3-content" style="max-width:1500px">
<header class="w3-container w3-blue">
<h1>My Website</h1>
</header>
<main class="w3-container">
<h2>Welcome</h2>
<p>This page has a maximum width of 1500px.</p>
</main>
</body>
Create a page with a maximum width of 800px:
<body class="w3-content" style="max-width:800px">
<header class="w3-container w3-blue">
<h1>My Website</h1>
</header>
<main class="w3-container">
<h2>Welcome</h2>
<p>This page has a maximum width of 800px.</p>
</main>
</body>
The maximum width is a limit, not a fixed width.
The page becomes narrower when less space is available.
Apply w3-content to a Part of the Page
You can also add the w3-content class to a part of your page:
Example
<body>
<header class="w3-container w3-blue">
<h1>My Website</h1>
</header>
<div class="w3-content">
<main class="w3-container">
<h2>Welcome</h2>
<p>This part is centered with a maximum width.</p>
</main>
</div>
<footer class="w3-container w3-light-grey">
<p>Footer</p>
</footer>
</body>
The w3-auto Class
The w3-auto class creates a centered page with a maximum width of 1140px on large screens.
Its maximum width changes at smaller screen sizes:
| Screen Width | Maximum Page Width |
|---|---|
| Above 1205px | 1140px |
| Above 992px and up to 1205px | 95% of the available width |
| 992px or less | 100% of the available width |
Example
<body class="w3-auto">
<header class="w3-container w3-blue">
<h1>My Website</h1>
</header>
<main class="w3-container">
<h2>Welcome</h2>
<p>This page adapts its maximum width to the screen size.</p>
</main>
<footer class="w3-container w3-light-grey">
<p>My Footer</p>
</footer>
</body>
When to Use w3-content
The w3-content class is useful when you want a consistent maximum page width.
On very wide screens, the page stays centered instead of stretching across the screen.
The default maximum width of 980px works well for many articles, blogs, and simple websites.
You can choose a larger maximum width for pages with more columns or large pictures.
When to Use w3-auto
The w3-auto class is useful when you want the page width to adapt automatically to the screen size.
On smaller laptops with a viewport wider than 992px and up to 1205px, the page uses up to 95% of the available width.
This makes good use of the screen while leaving some space on both sides.
On larger screens, the maximum width is 1140px. On screens 992px wide or less, the page can use the full available width.
Center Text and Images
Centering the page does not center the text or images inside it.
Use w3-center when you want centered text or an inline image inside a page section.
Example
<div class="w3-content">
<div class="w3-container w3-center">
<h2>Centered Heading</h2>
<p>Centered text inside a centered page.</p>
<img src="img_avatar3.png" alt="Avatar" style="width:100px">
</div>
</div>
Class Reference
| Class | Purpose |
|---|---|
w3-content |
Centers the page horizontally with a default maximum width of 980px. |
w3-auto | Centers the page horizontally with responsive maximum widths. |
w3-center | Centers text and inline elements inside an element. |
