Class |
Defines |
w3-container |
HTML container with 16px left and right padding |
|
Used as header |
|
Used as footer |
w3-panel |
HTML container with 16px left and right padding and 16px top and bottom margin |
|
Used to display a note |
|
Used to display a quote |
w3-badge |
Circular badge |
w3-tag |
Rectangular tag |
w3-ul |
Unordered list |
w3-display-container |
Container for w3-display-classes (enables positioning of elements
inside the container) |
w3-block |
Class that can be used to define a full width for any element |
w3-code |
Code container |
w3-codespan |
Inline code container (for code snippets) |
w3-content |
Container for fixed size centered content |
w3-auto |
Container for responsive size centered content |
w3-stretch |
Class that removes right and left margins (especially useful for stretching padded rows (w3-row-padding)) |
Class |
Defines |
w3-row |
Container for one row of fluid responsive content |
w3-row-padding |
Row where all columns have a default padding |
w3-auto |
Container for responsive size centered content |
w3-stretch |
Class that removes right and left margins |
w3-half |
Half (1/2) screen column container |
w3-third |
Third (1/3) screen column container |
w3-twothird |
Two third (2/3) screen column container |
w3-quarter |
Quarter (1/4) screen column container |
w3-threequarter |
Three quarters (3/4) screen column container |
w3-col |
Column container for any HTML content |
w3-rest |
Occupies the rest of the column width |
|
|
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) |
w3-hide-medium |
Hide content on medium screens |
w3-hide-large |
Hide content on large screens (larger than 992px) |
|
|
w3-image |
Responsive image |
|
|
w3-mobile |
Adds mobile-first responsiveness to any element. Displays
elements as block elements on mobile devices. |
Class |
Defines |
w3-bar |
Horizontal bar |
w3-bar-block |
Vertical bar |
w3-bar-item |
Provides common style for bar items |
w3-sidebar |
Side bar |
|
A side bar can contain all types of content |
|
A side bar overlaying main content |
|
A side bar overlaying all main content |
|
A side bar shifting main content to the right |
|
A side bar with an overlay background |
|
A Side bar on the right side |
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 |
w3-main |
Container for page content when using the w3-collapse class for responsive side navigations |
|
Fully automatic right-sided responsive side navigation |
Class |
Defines |
w3-animate-top |
Animates an element from the top -300px to 0px |
w3-animate-left |
Animates an element from left -300px to 0px |
w3-animate-bottom |
Animates an element from the bottom -300px to 0px |
w3-animate-right |
Animates an element from right -300px to 0px |
w3-animate-opacity |
Animates an element's opacity from 0 to 1 |
w3-animate-zoom |
Animates an element from 0 to 100% in size |
w3-animate-fading |
Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) |
w3-spin |
Spin an icon 360 degrees |
|
Spin any element 360 degrees |
w3-animate-input |
Animates the width of an input field to 100% |
Class |
Defines |
w3-tiny |
Specifies a font size of 10 pixels |
w3-small |
Specifies a font size of 12 pixels |
w3-large |
Specifies a font size of 18 pixels |
w3-xlarge |
Specifies a font size of 24 pixels |
w3-xxlarge |
Specifies a font size of 32 pixels |
w3-xxxlarge |
Specifies a font size of 48 pixels |
w3-jumbo |
Specifies a font size of 64 pixels |
w3-wide |
Specifies a wider text |
w3-serif |
Changes the font to serif |
w3-sans-serif |
Changes the font to sans-serif |
w3-cursive |
Changes the font to cursive |
w3-monospace |
Changes the font to monospace |
Class |
Defines |
w3-center |
Centered content |
w3-left |
Floats an element to the left (float: left) |
w3-right |
Floats an element to the right (float: right) |
w3-left-align |
Left aligned text |
w3-right-align |
Right aligned text |
w3-justify |
Right and left aligned text |
w3-block |
Class that can be used to define a full width for any element |
w3-circle |
Circled content |
w3-hide |
Hidden content (display:none) |
w3-show |
Show content (display:block) |
w3-show-block |
Alias of w3-show (display:block) |
w3-show-inline-block |
Show content as inline-block (display:inline-block) |
w3-top |
Fixed content at the top of a page |
w3-bottom |
Fixed content at the bottom of a page |
w3-display-container |
Container for w3-display-classes (position: relative) |
w3-display-topleft |
Displays content at the top left corner of the w3-display-container |
w3-display-topright |
Displays content at the top right corner of the w3-display-container |
w3-display-bottomleft |
Displays content at the bottom left corner of the w3-display-container |
w3-display-bottomright |
Displays content at the bottom right corner of the w3-display-container |
w3-display-left |
Displays content to the left (middle left) of the w3-display-container |
w3-display-right |
Displays content to the right (middle right) of the w3-display-container |
w3-display-middle |
Displays content in the middle (center) of the w3-display-container |
w3-display-topmiddle |
Displays content at the top middle of the w3-display-container |
w3-display-bottommiddle |
Displays content at the bottom middle of the w3-display-container |
w3-display-position |
Displays content at a specified position in the w3-display-container |
w3-display-hover |
Displays content on hover inside the w3-display-container |
Class |
Defines |
w3-opacity |
Adds opacity/transparency to an element (opacity: 0.6) |
|
Add opacity/transparency to text |
w3-opacity-off |
Turns off opacity/transparency (opacity: 1) |
w3-opacity-min |
Adds opacity/transparency to an element (opacity: 0.75) |
w3-opacity-max |
Adds opacity/transparency to an element (opacity: 0.25) |
w3-grayscale-min |
Adds a grayscale effect to an element (grayscale: 50%) |
w3-grayscale |
Adds a grayscale effect to an element (grayscale: 75%) |
w3-grayscale-max |
Adds a grayscale effect to an element (grayscale: 100%) |
w3-sepia-min |
Adds a sepia effect to an element (sepia: 50%) |
w3-sepia |
Adds a sepia effect to an element (sepia: 75%) |
w3-sepia-max |
Adds a sepia effect to an element (sepia: 100%) |
w3-overlay |
Creates an overlay effect |
Class |
Defines |
w3-red |
Background color red |
w3-pink |
Background color pink |
w3-purple |
Background color purple |
w3-deep-purple |
Background color deep purple |
w3-indigo |
Background color indigo |
w3-blue |
Background color blue |
w3-light-blue |
Background color light blue |
w3-cyan |
Background color cyan |
w3-aqua |
Background color aqua |
w3-teal |
Background color teal |
w3-green |
Background color green |
w3-light-green |
Background color light green |
w3-lime |
Background color lime |
w3-sand |
Background color sand |
w3-khaki |
Background color khaki |
w3-yellow |
Background color yellow |
w3-amber |
Background color amber |
w3-orange |
Background color orange |
w3-deep-orange |
Background color deep orange |
w3-blue-grey |
Background color blue grey |
w3-brown |
Background color brown |
w3-light-grey |
Background color light grey |
w3-grey |
Background color grey |
w3-dark-grey |
Background color dark grey |
w3-black |
Background color black |
w3-pale-red |
Background color pale red |
w3-pale-yellow |
Background color pale yellow |
w3-pale-green |
Background color pale green |
w3-pale-blue |
Background color pale blue |
w3-transparent |
Transparent background-color |
Class |
Defines |
w3-padding-small |
Padding 4px top and bottom, and 8px left and right. |
w3-padding |
Padding 8px top and bottom, and 16px left and right. |
w3-padding-large |
Padding 12px top and bottom, and 24px left and right. |
w3-padding-16 |
Padding 16px top and bottom |
w3-padding-24 |
Padding 24px top and bottom |
w3-padding-32 |
Padding 32px top and bottom |
w3-padding-48 |
Padding 48px top and bottom |
w3-padding-64 |
Padding 64px top and bottom |
w3-padding-top-64 |
Padding 64px on top |
w3-padding-top-48 |
Padding 48px on top |
w3-padding-top-32 |
Padding 32px on top |
w3-padding-top-24 |
Padding 24px on top |