W3.CSS Reference
W3.CSS Classes
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 |
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-table-all | All properties set | Try it |
| With w3-striped, w3-border, and w3-bordered | Try it | |
| With colored head | Try it | |
| With w3-responsive | Try it | |
| With w3-tiny | Try it | |
| With w3-small | Try it | |
| With w3-large | Try it | |
| With w3-xlarge | Try it | |
| With w3-xxlarge | Try it | |
| With w3-xxxlarge | Try it | |
| With color | Try it | |
| With w3-jumbo | 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 | Half (1/2) screen column container | Try it |
| w3-third | Third (1/3) screen column container | Try it |
| w3-twothird | Two third (2/3) screen column container | Try it |
| w3-quarter | Quarter (1/4) screen column container | Try it |
| w3-threequarter | Three quarters (3/4) screen column container | Try it |
| w3-col | Column container for any 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 |
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 |
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
| Class | Defines | |
|---|---|---|
| w3-red | Background color red | Try it |
| w3-pink | Background color pink | Try it |
| w3-purple | Background color purple | Try it |
| w3-deep-purple | Background color deep purple | Try it |
| w3-indigo | Background color indigo | Try it |
| w3-blue | Background color blue | Try it |
| w3-light-blue | Background color light blue | Try it |
| w3-cyan | Background color cyan | Try it |
| w3-aqua | Background color aqua | Try it |
| w3-teal | Background color teal | Try it |
| w3-green | Background color green | Try it |
| w3-light-green | Background color light green | Try it |
| w3-lime | Background color lime | Try it |
| w3-sand | Background color sand | Try it |
| w3-khaki | Background color khaki | Try it |
| w3-yellow | Background color yellow | Try it |
| w3-amber | Background color amber | Try it |
| w3-orange | Background color orange | Try it |
| w3-deep-orange | Background color deep orange | Try it |
| w3-blue-grey | Background color blue grey | Try it |
| w3-brown | Background color brown | Try it |
| w3-light-grey | Background color light grey | Try it |
| w3-grey | Background color grey | Try it |
| w3-dark-grey | Background color dark grey | Try it |
| w3-black | Background color black | Try it |
| w3-pale-red | Background color pale red | Try it |
| w3-pale-yellow | Background color pale yellow | Try it |
| w3-pale-green | Background color pale green | Try it |
| w3-pale-blue | Background color pale blue | Try it |
| w3-transparent | Transparent background-color |
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 an 16px margin to an element | Try it |
| w3-margin-top | Adds an 16px top margin to an element | Try it |
| w3-margin-right | Adds an 16px right margin to an element | Try it |
| w3-margin-bottom | Adds an 16px bottom margin to an element | Try it |
| w3-margin-left | Adds an 16px left margin to an element | Try it |
| w3-section | Adds an 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 |
