W3.CSS Reference
W3.CSS Classes
This reference lists the classes available in W3.CSS and shows what each class does.
Container Classes
| Class | Defines | |
|---|---|---|
| w3-container | HTML container with 16px left and right padding | Try it |
| Used as header | Try it | |
| Used as footer | Try it | |
| w3-panel | HTML container with 16px left and right padding and 16px top and bottom margin | Try it |
| Used to display a note | Try it | |
| Used to display a quote | Try it | |
| w3-badge | Circular badge | Try it |
| w3-tag | Rectangular tag | Try it |
| w3-ul | Unordered list | Try it |
| w3-display-container | Container for w3-display-classes (enables positioning of elements inside the container) | Try it |
| w3-block | Class that can be used to define a full width for any element | Try it |
| w3-code | Code container | Try it |
| w3-codespan | Inline code container (for code snippets) | Try it |
| w3-content | Container for fixed size centered content | Try it |
| w3-auto | Container for responsive size centered content | Try it |
| w3-stretch | Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) | Try it |
| w3-rtl | Adjusts text direction for right to left (rtl) layout | Try it |
| w3-ltr | Adjusts text direction for left to right (ltr) layout | Try it |
Table Classes
| Class | Defines | |
|---|---|---|
| w3-table | Container for an HTML table | Try it |
| w3-striped | Striped table | Try it |
| w3-border | Bordered table | Try it |
| w3-bordered | Bordered lines | Try it |
| w3-centered | Centered table | Try it |
| w3-hoverable | Hoverable table | Try it |
| w3-responsive | Creates a responsive table | Try it |
Card Classes
| Class | Defines | |
|---|---|---|
| w3-card | Same as w3-card-2 | Try it |
| w3-card-2 | Container for any HTML content (2px bordered shadow) | Try it |
| w3-card-4 | Container for any HTML content (4px bordered shadow) | Try it |
Responsive Classes
| Class | Defines | |
|---|---|---|
| w3-row | Container for one row of fluid responsive content | Try it |
| w3-row-padding | Row where all columns have a default padding | Try it |
| w3-auto | Container for responsive size centered content | Try it |
| w3-stretch | Class that removes right and left margins | Try it |
| w3-half | Responsive column that uses half of the row width | Try it |
| w3-third | Responsive column that uses one third of the row width | Try it |
| w3-twothird | Responsive column that uses two thirds of the row width | Try it |
| w3-quarter | Responsive column that uses one quarter of the row width | Try it |
| w3-threequarter | Responsive column that uses three quarters of the row width | Try it |
| w3-col | Responsive column container for HTML content | Try it |
| w3-rest | Occupies the rest of the column width | Try it |
| l1 - l12 | Responsive sizes for large screens | Try it |
| m1 - m12 | Responsive sizes for medium screens | Try it |
| s1 - s12 | Responsive sizes for small screens | Try it |
| w3-hide-small | Hide content on small screens (less than 601px) | Try it |
| w3-hide-medium | Hide content on medium screens | Try it |
| w3-hide-large | Hide content on large screens (larger than 992px) | Try it |
| w3-image | Responsive image | Try it |
| w3-mobile | Adds mobile-first responsiveness to any element. Displays elements as block elements on mobile devices. |
Try it |
Flexbox Classes
| Class | Defines | |
|---|---|---|
| w3-flex | Flexbox container for flexible one-dimensional layouts | Try it |
Grid Classes
| Class | Defines | |
|---|---|---|
| w3-grid | CSS Grid container for flexible two-dimensional layouts | Try it |
Layout Classes
| Class | Defines | |
|---|---|---|
| w3-cell-row | Container for layout columns (cells). | Try it |
| w3-cell | Layout column (cell). | Try it |
| w3-cell-top | Aligns content at the top of a column (cell). | Try it |
| w3-cell-middle | Aligns content at the vertical middle of a column (cell). | Try it |
| w3-cell-bottom | Aligns content at the bottom of a column (cell). | Try it |
Bar Classes - Navigation
| Class | Defines | |
|---|---|---|
| w3-bar | Horizontal bar | Try it |
| w3-bar-block | Vertical bar | Try it |
| w3-bar-item | Provides common style for bar items | Try it |
| w3-sidebar | Side bar | Try it |
| A side bar can contain all types of content | Try it | |
| A side bar overlaying main content | Try it | |
| A side bar overlaying all main content | Try it | |
| A side bar shifting main content to the right | Try it | |
| A side bar with an overlay background | Try it | |
| A Side bar on the right side | Try it | |
| w3-collapse | Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class | Try it |
| w3-main | Container for page content when using the w3-collapse class for responsive side navigations | Try it |
| Fully automatic right-sided responsive side navigation | Try it |
Dropdown Classes
| w3-dropdown-click | Clickable dropdown element | Try it |
| w3-dropdown-hover | Hoverable dropdown element | Try it |
| Hoverable dropdown element (used in w3-bar) | Try it | |
| Hoverable dropdown element (used in w3-bar-block) | Try it | |
| Hoverable dropdown element (used in w3-sidebar) | Try it |
Button Classes
| Class | Defines | |
|---|---|---|
| w3-button | Rectangular button with grey background color on hover | Try it |
| w3-btn | Rectangular button with shadows on hover | Try it |
| w3-circle | Can be used to create a circular button | Try it |
| w3-ripple | Rectangular button with ripple effect | Try it |
| Circular floating button with ripple effect | Try it | |
| w3-bar | Can be used to group elements (like buttons) in an horizontal bar | Try it |
| w3-block | Class that can be used to define a full width w3-button | Try it |
| Full width w3-btn | Try it | |
| Full width circular button | Try it |
Input Classes
| Class | Defines | |
|---|---|---|
| w3-input | Input elements | Try it |
| Input form as a card | Try it | |
| Input elements (top labels) | Try it | |
| Input elements (bottom labels) | Try it | |
| w3-check | Checkbox input type | Try it |
| w3-radio | Radio input type | Try it |
| w3-select | Input select element | Try it |
| w3-animate-input | Animates the width of an input to 100% | Try it |
Modal Classes
| Class | Defines | |
|---|---|---|
| w3-modal | Modal container | Try it |
| w3-modal-content | Modal pop-up element | Try it |
| w3-tooltip | Tooltip element | Try it |
| w3-text | Tooltip text | Try it |
Animation Classes
| Class | Defines | |
|---|---|---|
| w3-animate-top | Animates an element from the top -300px to 0px | Try it |
| w3-animate-left | Animates an element from left -300px to 0px | Try it |
| w3-animate-bottom | Animates an element from the bottom -300px to 0px | Try it |
| w3-animate-right | Animates an element from right -300px to 0px | Try it |
| w3-animate-opacity | Animates an element's opacity from 0 to 1 | Try it |
| w3-animate-zoom | Animates an element from 0 to 100% in size | Try it |
| w3-animate-fading | Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) | Try it |
| w3-spin | Spin an icon 360 degrees | Try it |
| Spin any element 360 degrees | Try it | |
| w3-animate-input | Animates the width of an input field to 100% | Try it |
Font and Text Classes
| Class | Defines | |
|---|---|---|
| w3-tiny | Specifies a font size of 10 pixels | Try it |
| w3-small | Specifies a font size of 12 pixels | Try it |
| w3-large | Specifies a font size of 18 pixels | Try it |
| w3-xlarge | Specifies a font size of 24 pixels | Try it |
| w3-xxlarge | Specifies a font size of 32 pixels | Try it |
| w3-xxxlarge | Specifies a font size of 48 pixels | Try it |
| w3-jumbo | Specifies a font size of 64 pixels | Try it |
| w3-wide | Specifies a wider text | Try it |
| w3-serif | Changes the font to serif | Try it |
| w3-sans-serif | Changes the font to sans-serif | Try it |
| w3-cursive | Changes the font to cursive | Try it |
| w3-monospace | Changes the font to monospace | Try it |
| w3-center | Center text | Try it |
New in Version 5
| w3-rtl | Adjusts text direction for right to left (rtl) layout | Try it |
| w3-ltr | Adjusts text direction for left to right (ltr) layout | Try it |
| w3-text-center | Center text (same as w3-center) | Try it |
| w3-bold | Changes the font to bold | Try it |
| w3-text-bold | Changes the font to bold (same as w3-bold) | Try it |
| w3-italic | Changes the font to italic | Try it |
| w3-text-italic | Changes the font to italic (same as w3-italic) | Try it |
Display Classes
| Class | Defines | |
|---|---|---|
| w3-center | Centered content | Try it |
| w3-left | Floats an element to the left (float: left) | Try it |
| w3-right | Floats an element to the right (float: right) | Try it |
| w3-left-align | Left aligned text | Try it |
| w3-right-align | Right aligned text | Try it |
| w3-justify | Right and left aligned text | Try it |
| w3-block | Class that can be used to define a full width for any element | Try it |
| w3-circle | Circled content | Try it |
| w3-hide | Hidden content (display:none) | Try it |
| w3-show | Show content (display:block) | Try it |
| w3-show-block | Alias of w3-show (display:block) | Try it |
| w3-show-inline-block | Show content as inline-block (display:inline-block) | Try it |
| w3-top | Fixed content at the top of a page | Try it |
| w3-bottom | Fixed content at the bottom of a page | Try it |
| w3-display-container | Container for w3-display-classes (position: relative) | Try it |
| w3-display-topleft | Displays content at the top left corner of the w3-display-container | Try it |
| w3-display-topright | Displays content at the top right corner of the w3-display-container | Try it |
| w3-display-bottomleft | Displays content at the bottom left corner of the w3-display-container | Try it |
| w3-display-bottomright | Displays content at the bottom right corner of the w3-display-container | Try it |
| w3-display-left | Displays content to the left (middle left) of the w3-display-container | Try it |
| w3-display-right | Displays content to the right (middle right) of the w3-display-container | Try it |
| w3-display-middle | Displays content in the middle (center) of the w3-display-container | Try it |
| w3-display-topmiddle | Displays content at the top middle of the w3-display-container | Try it |
| w3-display-bottommiddle | Displays content at the bottom middle of the w3-display-container | Try it |
| w3-display-position | Displays content at a specified position in the w3-display-container | Try it |
| w3-display-hover | Displays content on hover inside the w3-display-container | Try it |
Effect Classes
| Class | Defines | |
|---|---|---|
| w3-opacity | Adds opacity/transparency to an element (opacity: 0.6) | Try it |
| Add opacity/transparency to text | Try it | |
| w3-opacity-off | Turns off opacity/transparency (opacity: 1) | Try it |
| w3-opacity-min | Adds opacity/transparency to an element (opacity: 0.75) | Try it |
| w3-opacity-max | Adds opacity/transparency to an element (opacity: 0.25) | Try it |
| w3-grayscale-min | Adds a grayscale effect to an element (grayscale: 50%) | Try it |
| w3-grayscale | Adds a grayscale effect to an element (grayscale: 75%) | Try it |
| w3-grayscale-max | Adds a grayscale effect to an element (grayscale: 100%) | Try it |
| w3-sepia-min | Adds a sepia effect to an element (sepia: 50%) | Try it |
| w3-sepia | Adds a sepia effect to an element (sepia: 75%) | Try it |
| w3-sepia-max | Adds a sepia effect to an element (sepia: 100%) | Try it |
| w3-overlay | Creates an overlay effect | Try it |
Background Color Classes
Red
Pink
Purple
Deep Purple
Indigo
Cobalt
Blue
Light Blue
Cyan
Aqua
Teal
Emerald
Green
Light Green
Lime
Khaki
Yellow
Amber
Orange
Deep Orange
Blue Gray
Olive
Taupe
Sienna
Brown
Crimson
Sand
White
Paper
Light Gray
Gray
Dark Gray
Asphalt
Black
Pale Red
Pale Yellow
Pale Green
Pale Blue
Note
Yellow is often used for notifications.
w3-danger, w3-warning, w3-success, w3-info, w3-note are new in W3.CSS version 5.0.
Transparent
Hover Color Classes
The colors above can also be used as hover classes:
| Class | Defines | |
|---|---|---|
| w3-hover-white | Hover color white | Try it |
| w3-hover-black | Hover color black | Try it |
| w3-hover-red | Hover color red | Try it |
| w3-hover-blue | Hover color blue | Try it |
| w3-hover-green | Hover color green | Try it |
| w3-hover-aqua | Hover color aqua | Try it |
| w3-hover-orange | Hover color orange | Try it |
| w3-hover-grey | Hover color grey | Try it |
| w3-hover-pale-green | Hover color pale green | Try it |
Text Color Classes
| Class | Defines | |
|---|---|---|
| w3-text-red | Text color red | Try it |
| w3-text-green | Text color green | Try it |
| w3-text-blue | Text color blue | Try it |
| w3-text-yellow | Text color yellow | Try it |
| w3-text-light-grey | Text color light-grey | Try it |
| w3-text-grey | Text color grey | Try it |
| w3-text-dark-grey | Text color dark grey | Try it |
| w3-text-black | Text color black | Try it |
| w3-text-white | Text color white | Try it |
| w3-text-pink | Text color pink | Try it |
| w3-text-purple | Text color purple | Try it |
| w3-text-teal | Text color teal | Try it |
| w3-text-light-green | Text color light green | Try it |
| w3-text-lime | Text color lime | Try it |
| w3-text-deep-purple | Text color deep purple | Try it |
| w3-text-indigo | Text color indigo | Try it |
| w3-text-light-blue | Text color light blue | Try it |
| w3-text-blue-grey | Text color blue grey | Try it |
| w3-text-cyan | Text color cyan | Try it |
| w3-text-aqua | Text color aqua | Try it |
| w3-text-amber | Text color amber | Try it |
| w3-text-orange | Text color orange | Try it |
| w3-text-deep-orange | Text color deep orange | Try it |
| w3-text-sand | Text color sand | Try it |
| w3-text-khaki | Text color khaki | Try it |
| w3-text-brown | Text color brown | Try it |
Hover Text Classes
The text classes above can also be used as hover classes:
| Class | Defines | |
|---|---|---|
| w3-hover-text-red | Hover text color red | Try it |
| w3-hover-text-green | Hover text color green | Try it |
| w3-hover-text-blue | Hover text color blue | Try it |
| w3-hover-text-yellow | Hover text color yellow | Try it |
Other Hover Classes
| Class | Defines | |
|---|---|---|
| w3-hover-border-color | Hover border color | Try it |
| w3-hover-opacity | Adds transparency to an element on hover (opacity: 0.6) | Try it |
| w3-hover-opacity-off | Removes transparency from an element on hover (100% opacity) | Try it |
| w3-hover-shadow | Adds shadow to an element on hover | Try it |
| w3-hover-grayscale | Adds a black and white (100% grayscale) effect to an element | Try it |
| w3-hover-sepia | Adds a sepia effect to an element on hover | Try it |
| w3-hover-none | Removes hover effects from an element | Try it |
Round Classes
| Class | Defines | |
|---|---|---|
| w3-round | Element rounded (border-radius) 4px | Try it |
| w3-round-small | Element rounded (border-radius) 2px | Try it |
| w3-round-medium | Element rounded (border-radius) 4px | Try it |
| w3-round-large | Element rounded (border-radius) 8px | Try it |
| w3-round-xlarge | Element rounded (border-radius) 16px | Try it |
| w3-round-xxlarge | Element rounded (border-radius) 32px | Try it |
Padding Classes
| Class | Defines | |
|---|---|---|
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | Try it |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | Try it |
| w3-padding-large | Padding 12px top and bottom, and 24px left and right. | Try it |
| w3-padding-16 | Padding 16px top and bottom | Try it |
| w3-padding-24 | Padding 24px top and bottom | Try it |
| w3-padding-32 | Padding 32px top and bottom | Try it |
| w3-padding-48 | Padding 48px top and bottom | Try it |
| w3-padding-64 | Padding 64px top and bottom | Try it |
| w3-padding-top-64 | Padding 64px on top | Try it |
| w3-padding-top-48 | Padding 48px on top | Try it |
| w3-padding-top-32 | Padding 32px on top | Try it |
| w3-padding-top-24 | Padding 24px on top | Try it |
Margin Classes
| Class | Defines | |
|---|---|---|
| w3-margin | Adds a 16px margin to an element | Try it |
| w3-margin-top | Adds a 16px top margin to an element | Try it |
| w3-margin-right | Adds a 16px right margin to an element | Try it |
| w3-margin-bottom | Adds a 16px bottom margin to an element | Try it |
| w3-margin-left | Adds a 16px left margin to an element | Try it |
| w3-section | Adds a 16px top and bottom margin to an element | Try it |
Border Classes
| Class | Defines | |
|---|---|---|
| w3-border | Borders (top, right, bottom, left) | Try it |
| w3-border-top | Border top | Try it |
| w3-border-right | Border right | Try it |
| w3-border-bottom | Border bottom | Try it |
| w3-border-left | Border left | Try it |
| w3-border-0 | Removes all borders | Try it |
| w3-border-color | Displays any defined borders in a specified color (like red, etc) | Try it |
| w3-bottombar | Adds a thick bottom border (bar) to an element | Try it |
| w3-leftbar | Adds a thick left border (bar) to an element | Try it |
| w3-rightbar | Adds a thick right border (bar) to an element | Try it |
| w3-topbar | Adds a thick top border (bar) to an element | Try it |
| w3-hover-border-color | Hoverable border color | Try it |
