W3.CSS Kitchen Sink

W3.CSS at a Glance

This page demonstrates many W3.CSS classes on one page.

Use it as a quick visual reference or as inspiration for your own pages.

W3.CSS Containers

The w3-container class provides a web page with standard margins, paddings, and standard vertical and horizontal alignments:

This is a Header

London

London is the most populous city in the United Kingdom.

It has a metropolitan area of over 9 million inhabitants.

The w3-container class is typically used with HTML container elements like:

<div>
<header>
<footer>
<nav>
<article>
<section>
<form>

W3.CSS Panels

The w3-panel class is a container class with added top and bottom margin.

I am a panel.

Panels are useful for notes, quotes, and alerts.

W3.CSS Cards

The w3-card class is suitable for both images and notes:

A 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, to have seating for one to eight people, and to typically have four wheels.

(Wikipedia)

Amazing

French Alps

W3.CSS Responsive Page Sizes

w3-content centers content with a maximum width.

w3-auto creates a responsive centered container.

W3.CSS Flexbox

The w3-flex class defines a container for flexbox items.

The children of the flexbox container automatically become flexbox items.

1

2

3

Left

Center

Right

Fixed

Flexible

W3.CSS Grid

The w3-grid class creates a parent container for grid items.

The children of the grid container automatically become grid items.

1

2

3

4

5

6

7

8

W3.CSS Rows

The w3-row class can divide rows into halves, thirds, and quarters.

The columns automatically stack on small screens.

w3-half

w3-third

w3-quarter

w3-threequarter

W3.CSS Cells

The w3-cell class creates simple column layouts.

Cells can automatically adjust their width and height and can be vertically aligned.

Hello W3.CSS Cell

12-Column Layout

The w3-row class can also divide a web page into 12 columns.

The class supports a 12 column mobile-first fluid grid with small, medium, and large classes.

s12 m6 l4
s12 m6 l4
s12 m12 l4

s12 uses 12 columns on a small screen
m6 uses six columns on a medium screen
l4 uses 4 columns on a large screen

W3.CSS Layout Choices

Layout	Use For
Flexbox	Rows or columns, alignment, and flexible items
Grid	Modern layouts with rows and columns
Rows	Simple halves, thirds, and quarters
Cells	Simple equal-height, table-like layouts
12-Column Layout	Compatibility with older W3.CSS responsive layouts