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.
Containers
Header
London
London is the capital of England.
It is one of the world's great cities.
Panels
I am a panel.
Cards
Card
A simple card with text.
French Alps
Card 4
A card with a larger shadow.
Buttons
Responsive
w3-content centers content with a maximum width.
w3-auto creates a responsive centered container.
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 |
For new layouts, Flexbox and Grid are usually the most flexible choices.
The older W3.CSS layout classes remain supported for compatibility and convenience.
Flexbox
1
2
3
Grid
1
2
3
4
5
6
Rows
1/2
1/2
1/3
1/3
1/3
1/4
3/4
Cells
Top
Middle
Bottom
12-Column Layout
The 12-column system is supported for compatibility with existing W3.CSS websites.
s12 m6 l4
s12 m6 l4
s12 m12 l4
Display
Round
Round Round Large Round XLarge
Borders
Border
Padding and Margins
Padding
Margin
Notes and Quotes
Note
This is a note.
Alerts
Danger!
Something needs immediate attention.
Warning!
Something might need attention.
Success!
The operation completed successfully.
Info
Here is some useful information.
Tables
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Lists
Members
- John
- Paul
- Lisa
Images
Responsive width
Rounded
Circle
Normal
Opacity
Grayscale
Sepia
Tags and Badges
2 8 New Warning Danger Info
Input Forms
Bars and Navigation
Dropdowns
Accordions
Accordion content.
Tabs
London
London is the capital of England.
Progress Bars
Modal
Tooltips
Hover over this text Tooltip content
Effects
Normal
w3-opacity
w3-grayscale-max
w3-sepia-max
Animations
Top
Left
Right
Zoom
Pagination
Dark Mode
Dark Content
W3.CSS color classes can be used to build dark interfaces.
Colors
Red
Green
Blue
Yellow
Amber
Olive
Indigo
Lime
Light Grey
Black
