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-code |
Code container |
Try it |
Table Classes
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-col |
Column container for any HTML content |
Try it |
| |
|
|
| l1 - l12 |
Responsive sizes for large screens |
|
| m1 - m12 |
Responsive sizes for medium screens |
|
| s1 - s12 |
Responsive sizes for small screens |
|
| |
|
|
| 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-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 |
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-opacity |
Adds transparency to an element on hover (60% opacity) |
Try it |
| w3-hover-shadow |
Adds shadow to an element on hover |
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 |
No padding |
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 |
Padding 8px top and bottom, and 16px 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-4 |
Padding 4px top and bottom |
Try it |
| w3-padding-8 |
Padding 8px top and bottom |
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 |
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 |
Margin Classes
| Class |
Defines |
|
| w3-margin |
Same as w3-margin-16 |
Try it |
| w3-margin-0 |
Margin 0 (top, right, bottom and left) |
Try it |
| w3-margin-2 |
Margin 2px (top, right, bottom and left) |
Try it |
| w3-margin-4 |
Margin 4px (top, right, bottom and left) |
Try it |
| w3-margin-8 |
Margin 8px (top, right, bottom and left) |
Try it |
| w3-margin-12 |
Margin 12px (top, right, bottom and left) |
Try it |
| w3-margin-16 |
Margin 16px (top, right, bottom and left) |
Try it |
| w3-margin-24 |
Margin 24px (top, right, bottom and left) |
Try it |
| w3-margin-32 |
Margin 32px (top, right, bottom and left) |
Try it |
| w3-margin-64 |
Margin 64px (top, right, bottom and left) |
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-blue |
Displays any defined borders in blue |
Try it |
| w3-border-green |
Displays any defined border in green |
Try it |
| w3-border-red |
Displays any border as red |
Try it |
| w3-border-yellow |
Displays any border as yellow |
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 |
