W3.CSS References
The Container Classes
| Class | Defines | |
|---|---|---|
| w3-container | Container for HTML content (adds 16px padding left and right) | Try it |
| Used with color classes | Try it | |
| Used as header | Try it | |
| Used as footer | Try it | |
| Used with w3-leftbar | Try it | |
| Used with w3-bottombar | Try it | |
| w3-section | Container for HTML content (adds 16px margin top and bottom) | Try it |
| w3-badge | Circular badge 8 | Try it |
| w3-tag | Rectangular tag More Later ! | Try it |
| w3-ul | Unordered list | Try it |
| w3-display-container | Container for w3-display-classes (position an element in the top left, top right, bottom left or the bottom right corner, or in the middle of the container) | Try it |
| w3-image | Deprecated. Use w3-display-container instead. | Try it |
| w3-blockquote | Removed in 2.0 (use w3-leftbar instead) | Try it |
| w3-example | Example container | Try it |
| w3-code | Code container | Try it |
| w3-progress-container | Progress bar container | 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-responsible | 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 |
Card Classes
| Class | Defines | |
|---|---|---|
| w3-card | Container for any HTML content (With border) | 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 |
| w3-card-8 | Container for any HTML content (8px bordered shadow) | Try it |
| w3-card-12 | Container for any HTML content (12px bordered shadow) | Try it |
| w3-card-16 | Container for any HTML content (16px bordered shadow) | Try it |
| w3-card-24 | Container for any HTML content (24px 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-content | Container for fixed size centered content | 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 |
| 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 |
Navigation Classes
| Class | Defines | |
|---|---|---|
| w3-navbar | Navigation bar | Try it |
| Collapsible navigation bar | Try it | |
| w3-topnav | Top navigation bar | Try it |
| w3-sidenav | Side navigation bar | Try it |
| Side navigation bar overlaying main content | Try it | |
| Side navigation bar overlaying all main content | Try it | |
| Side navigation bar shifting main content to the right | Try it | |
| Side navigation bar with an overlay background | Try it | |
| w3-collapse | Fully automatic responsive side navigation | Try it |
| w3-dropnav | Dropdown navigation | Try it |
| w3-dropdown-click | Clickable dropdown element | Try it |
| w3-dropdown-hover | Hoverable dropdown element | Try it |
| Hoverable dropdown element (used in w3-navbar) | Try it | |
| Hoverable dropdown element (used in w3-sidenav) | Try it | |
| Hoverable dropdown element (used in w3-topnav) | Try it | |
| w3-accordion | Hide and show collapsible content | Try it |
| Clickable accordion and dropdown used in w3-sidenav | Try it | |
| w3-pagination | Pagination links | Try it |
Button Classes
| Class | Defines | |
|---|---|---|
| w3-btn | Rectangular HTML button | Try it |
| Rectangular HTML button with ripple effect | Try it | |
| w3-btn-floating | Circular floating button | Try it |
| Circular floating button with ripple effect | Try it | |
| w3-btn-group | Grouped buttons | Try it |
| w3-btn-block | Full-width buttons (100%) | Try it |
Input Classes
| Class | Defines | |
|---|---|---|
| w3-form | Same as w3-padding | Try it |
| Input form as a card | Try it | |
| w3-input | Input elements | Try it |
| Input elements (top labels) | Try it | |
| Input elements (bottom labels) | Try it | |
| w3-group | Group of HTML elements | Try it |
| w3-label | Input label | Try it |
| w3-validate | Validates input (Changes color when invalid input) | 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 |
| Tooltip inline | 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 |
Utility 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 20 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-slim | Specifies a slimmer text | Try it |
| w3-wide | Specifies a wider text | Try it |
| w3-vertical | Specifies vertical text | Try it |
| w3-top | Fixed content on top of page | Try it |
| w3-center | Centered content | 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-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-left | Left adjusted content | Try it |
| w3-right | Right adjusted content | 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-display-container | Container for w3-display-classes (position: relative) | Try it |
| w3-display-topleft | Position content in the top left corner | Try it |
| w3-display-topright | Position content in the top right corner | Try it |
| w3-display-bottomleft | Position content in the bottom left corner | Try it |
| w3-display-bottomright | Position content in the bottom right corner | Try it |
| w3-display-middle | Position content in the middle (horizontally and vertically) | Try it |
| w3-display-topmiddle | Position content in the middle at the top of the element | Try it |
| w3-display-bottommiddle | Position content in the middle at the bottom of the element | Try it |
| w3-serif | Changes the font to serif | Try it |
| w3-opacity | Adds opacity to text | Try it |
| Adds opacity to any element | Try it | |
| w3-overlay | Creates an overlay effect | Try it |
| w3-text-shadow | Adds shadows to text | Try it |
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 Classes
All 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 |
| w3-hover-text-red | Hover text color red | Try it |
| w3-hover-text-red | Hover text color blue | Try it |
| w3-hover-text-green | Hover text color green | Try it |
| w3-hover-text-purple | Hover text color purple | Try it |
| w3-hover-border-color | Hover border color | Try it |
| w3-hover-opacity | Adds transparency to an element on hover (60% opacity) | Try it |
| w3-hover-shadow | Adds shadow 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 |
| w3-round-jumbo | Element rounded (border-radius) 64px | Try it |
Padding Classes
| Class | Defines | |
|---|---|---|
| w3-padding-0 | Removes all padding from an element | Try it |
| w3-padding | Padding 8px top and bottom, and 16px left and right. | Try it |
| w3-padding-tiny | Padding 2px top and bottom, and 4px left and right. | Try it |
| w3-padding-small | Padding 4px top and bottom, and 8px left and right. | Try it |
| w3-padding-medium | 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-xlarge | Padding 16px top and bottom, and 32px left and right. | Try it |
| w3-padding-xxlarge | Padding 24px top and bottom, and 48px left and right. | Try it |
| w3-padding-jumbo | Padding 32px top and bottom, and 64px left and right. | Try it |
| w3-padding-top | Padding top 8px | Try it |
| w3-padding-right | Padding right 16px | Try it |
| w3-padding-bottom | Padding bottom 8px | Try it |
| w3-padding-left | Padding left 16px | Try it |
| w3-padding-hor-4 | Padding 4px top and bottom | Try it |
| w3-padding-hor-8 | Padding 8px top and bottom | Try it |
| w3-padding-hor-12 | Padding 12px top and bottom | Try it |
| w3-padding-hor-16 | Padding 16px top and bottom | Try it |
| w3-padding-hor-24 | Padding 24px top and bottom | Try it |
| w3-padding-hor-32 | Padding 32px top and bottom | Try it |
| w3-padding-hor-48 | Padding 48px top and bottom | Try it |
| w3-padding-hor-64 | Padding 64px top and bottom | Try it |
| w3-padding-hor-128 | Padding 128px top and bottom | Try it |
| w3-padding-ver-4 | Padding 4px left and right. | Try it |
| w3-padding-ver-8 | Padding 8px left and right. | Try it |
| w3-padding-ver-16 | Padding 16px left and right. | Try it |
| w3-padding-ver-24 | Padding 24px left and right. | Try it |
| w3-padding-ver-32 | Padding 32px left and right. | Try it |
| w3-padding-ver-48 | Padding 48px left and right. | Try it |
| w3-padding-ver-64 | Padding 64px left and right. | Try it |
Margin Classes
| Class | Defines | |
|---|---|---|
| w3-margin-0 | Removes all margins from an element | Try it |
| w3-margin | Margin 16px | Try it |
| w3-margin-top | Margin top 16px | Try it |
| w3-margin-right | Margin right 16px | Try it |
| w3-margin-bottom | Margin bottom 16px | Try it |
| w3-margin-left | Margin left 16px | 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 |
